how to code ordered lists within <span> via markdown for wordpress & free standing .html files?

No worries at all! I’ll do my best to summarise the ingredients and demonstrate their synthesis in an example project.

Using styles as a base premise, can I create apple lists with colored backgrounds + formatting (bold, Italic) + regular hyperlinks to other webpages + footnote links (cf)? that compile via markdown to;

To that specifically, no, on account of limitations in the interaction between Scrivener’s style system, and the underlying list system. As demonstrated above, if you try to put a style around a list then the list can be damaged by doing so. While it may look nice in the text editor, it’s really not a functional solution for anything other than looking nice in the editor, I’m afraid. Those highlights don’t even mean anything outside of Scrivener. But like the bubbles around inline footnotes and annotations, they are internal ‘syntax highlighting’ if you will.

Hence the best available solutions are those that seek to generate the output you desire, by putting markers around the list. Good callout boxes are really only something you can achieve with Scrivener’s non-word processing methods, as those require complex technology not supported by Scrivener, like floating boxes, background colours, borders and such.

The implications are that while you can create a callout box with its ebook HTML-based formats and of course the Markdown-based stuff, there is nothing you can do to create such a thing with the RTF-based stuff. Therefore there is no material advantage in having a style wrapped around the entire list anyway, and there is not much you can do short of hinting to yourself where a box should be, and formatting these things in a proper layout environment after compiling.[1] (117 KB)

So with that in mind, more of the focus will be on those formats where callouts can be achieved. In the example project attached to this post, have a look at the following ingredients:

  • Note the “InfoBox” text around the list in the editor, and how it is styled with “Raw Markdown”. That’s all we need to do in the writing phase. The actual text in the styled range is up to you of course, you could use “@start:callout” and “@end:callout”, or whatever—but if you experiment with changing it around you’ll want to continue going through these bullets first.
  • In the “Compiled Examples” folder you’ll find the output results from the different compile formats I designed for this test. Markdown itself doesn’t have a callout box, so we just use HTML, which is acceptable. Note how the marker becomes full HTML in the first two examples. In the RTF example, nothing remains. The ePub example will need to be opened in a viewer.
  • Now open compile, which you should find in MultiMarkdown mode. The only notable thing here is that in the General Options tab on the right, we have the Convert rich text to MultiMarkdown setting applied.
  • Double-click the “Callout Box Example” format in the left sidebar and examine its settings:
    • In the Styles pane, we have our “Raw Markdown” style, with the Treat as raw markup setting enabled. This tells Scrivener to leave text marked like this alone.

    • In the Metadata pane I’ve added an “HTML Header” key with a little sample CSS so that we can see the results of the div in a browser.

    • Finally, in Replacements the markers used in the editor are converted to the desired HTML. Here is where you would need to change the settings if you wanted to use a different style of marker while writing.

      You could even type the HTML into the editor itself. The advantage in using an abstract marker is identical to the avantage we have in using Markdown however: it can be things other than HTML without a bunch of work. We could make another format that is designed for LaTeX, which would use different syntax for making a callout box, or DocBook.[2]

  • Back in the compile overview screen, you could have a look at the MultiMarkdown→HTML settings as well. There is nothing different however, they use the same Format. All this does is automate turning the .md file into .html when compiling.
  • Switch to Compile for: RTF. We now have two completely different compile Formats in the sidebar. The only interesting things they do will be found in the Style pane. One leaves the markers in the output as styled text (making them red so they are easier to spot). The other makes use of the Delete text of this style option to strip them out. While you don’t get any kind of callout box marking, it is at least something useful for proofing and similar.
  • Finally, I know you didn’t ask for it, but I thought it worth including a demonstration to ePub as well, and it only took a few seconds to do so anyway. If you switch over to Compile for: ePub 3, you might notice we’re using the same Format we do for MMD and MMD→HTML. That’s because the solution is essentially identical (we want the InfoBox tags to be converted to HTML and then left alone by the compiler), we just need to put information in different pane for the CSS stuff:
    • In the CSS pane, I enable “Append Custom CSS to Stylesheet”, and paste in the example CSS used by the MultiMarkdown format.

Hopefully that gives you some ideas of where you can go with this idea in your projects. There are other approaches as well of course, but I think this one has the best balance of getting what you want in two (or three) cases, and what best leads to what you want in the case of RTF.


  1. That is after all what we are doing with Markdown and HTML. The difference is that outside of WYSIWYG environments, one needn’t do everything with formatting codes. You’ll see similar even in traditional publication environments, the concept of using text markers for stuff like callouts is common place, rather than trying to affect these designs in office software and writing programs.
  2. Hopefully not to confuse the matter, but refer to this post. Note that although I use a single style around a block of text for callouts, I am not using Scrivener like a word processor. My text is Markdown, and if I were to put a list into a callout box, I would type it in using Markdown syntax.