Marked 2 support

Would be great too if Bike was able to tie in with Marked 2 to render the text into an attractive format. I know I can do this already preview in Marked with the opml version of the file but would be great if the bike format could be made to work there too (especially if it could make use of the ‘Streaming preview’ feature).

This integration would really come into its own if/when the notes feature is also added - where the note content would be displayed as text under the various heading levels that the general outline functions offer. For reference iThoughts mind mapping does this aspect really well.

1 Like

This seems to already be working in a basic form for me. If I open Marked on a .bike file I see content as HTML.

Two problems I see are:

  1. I see <?xml version=“1.0” encoding=“utf–8”?> at the start of the file. Any thoughts on why that is? I “think” I’m writing the file correctly, odd that Marked is showing that. Any idea how to make it now show?

  2. Bike files are just HTML, but there are a few issues that I think can be fixed with embedded stylesheet. For example it would be nice to hide bullets on empty items. It would maybe be nice to draw triangles instead of bullets.

Marked is really designed to preview MD files, and passes actual tags through as the exception, rendering them if they are recognizably HTML, which may not apply to the <?xml ...> tag.

I think the best way to use Marked with Bike may be to:

  • First generate MD from Bike with a preliminary external script (I’ve drafted a rough one for myself that does that)
  • Or write a (Bike → MD) preprocessor which plugs into the Marked > Preferences > Advanced > Custom Processor slot

The specifics of mapping from Bike outline nodes of varying depths to MD heading styles etc etc may get simpler if Bike nodes ever acquire some kind of type attribute mechanism. (e.g. to flag special node types, for formatting purposes, like note vs bullet list vs heading etc)


See:

Draft demos: Copy As Markdown & Save As Markdown - Bike - Hog Bay Software Support


PS I think the Streaming Preview feature of Marked requires implementation of a special output bundle format:

Welcome to TextBundle.org!

Though an older technique of writing MD to a named clipboard may still work:

Streaming Preview

https://marked2app.com/help/Streaming_Preview.html#developers

2 Likes

If Marked2 is displaying the <?xml ...> tag in direct previews of .bike files

you can switch that off by:

  • Choosing Preferences > Advanced in the Marked2.app menu system
  • Clicking on the Preprocessor panel (on the right – rather than Custom processor on the left)
  • Checking Enable Custom Processor

and filling out the Path: and Args: fields as below:

/usr/bin/tail
-n +2


The effect is just to drop the first line of the incoming HTML.
We could do this more delicately and conditionally with a script, (so that we don’t have to uncheck Enable Custom Preprocessor for non-Bike files), but it’s a start : -)


1 Like

One approach seems to be for a preprocessor to find cases where the paragraph is empty and decorate particular <li> elements passed to Marked with an inline style.

This seems to hide empty bullet lines entirely:

<li style="list-style: none;" id="6VB">
  <p/>
</li>

and this appears to be one way of getting blank lines without closing the gap:

<li style="list-style: none; "id="ib">
  <p>&nbsp;</p>
</li>

Something like this ?

list-style: url('../img/shape.png');

Maybe, I’m not sure.

My feeling is that more important than a Marked specific preview is getting Bike files to look right in a web browser. Once that’s in place then Quick Look previews can work, and I assume Marked previews could be made to work too.

@Blake Has a good start on this here:

I’m not sure if he is using list-style or not, but it doesn’t seem that way after a quick search of the CSS.

1 Like

For triangle bullets, I’m drawing them in CSS in order to have precise control over them. https://github.com/blakewatson/bike-web-enhancements/blob/main/src/app.css#L66

1 Like

Heh, I looked at that in CSS debugger, but thought I must be missing something. I have no idea how that makes a triangle! But glad that it does :slight_smile:

Ha, yeah it’s a bona fide CSS hack trick. It gives a 0px box a thick left-only border which forms a triangle because of the way border corners are rendered.

2 Likes