Span elements in code snippets

In md2pptx and also Drafts - from the same source in fact - I’d like to be able to do syntax colouring in code.

In md2pptx I explicitly support using span elements to colour pieces of text. But I don’t yet support them in code snippets - indented by 4 characters. ( I don’t yet support triple backticks at all.)

My question. Is: How far a deviation would it be from the spirit of common markdown to support span elements in code snippets?

My concern is that it makes it impossible to use with HTML snippets. One possible compromise is to only treat as a span an occurrence where the class is predefined - as metadata at the front of the file/draft.

The alternative is to support the convention where a language is indicated straight after three backticks. Personally I think this is beyond the scope of what md2pptx can/should do. (It does, however, already support the conversion of SVG to PNG - so there’s a kind of a precedent there.)


That is a common convention for language specific syntax highlighting in a Markdown code block. I think you have already answered your own question.

Right. But I don’t like the answer. :slight_smile:

It seems to me the code would need to:

  1. Pass the text out to some service.
  2. Parse whatever data structure came back.

I guess I need to investigate what services are available to a general Python (3.8+) programme. It’s OK to prereq an optional package. It’s not great to use a web service.

The reason for posting was to figure out if the simpler way of extending my parsing to pick up span elements in code snippets was valid. My feeling is it isn’t. Tempting as it’s simpler, but otherwise not better.

I think I have an all-round better solution: The <pre> element allows <span> elements within its scope, while retaining the fixed-pitch font useful for these cases.

It shouldn’t be a hardship to code a <pre> / </pre> bracket and paste in from e.g. Codye.

All I would then have to do is suggest users use the existing md2pptx metadata support for colouring in <span> elements to supply the colors. (md2pptx ignores CSS and Markdown processors generally ignore metadata so this “bilingual” solution has worked well in the past.)

@Andreas_Haberle might have a view on this.

I have to think on this a bit. Let’s do some comparison.

Asciidoctor uses a concept that allows to specify the highlighter via a variable.

:source-highlighter: <value>

This are the options

Library Value Language URL
CodeRay coderay ruby
highlight.js highlight.js javascript Getting highlight.js
Pygments pygments python
Rouge rouge ruby GitHub - rouge-ruby/rouge: A pure Ruby code highlighter that is compatible with Pygments

One of my questions is, how you would like to see it after mdpre.

I am a fan of asciidoctors include:: command that gives the writer the option to keep the code samples (or any part of the document) outside of the documentation. I think I will write something about that later, but maybe in another topic. Think of it as @sylumer cool multimarkdown action but in every available context. I have working examples to short cut tools like doxygen or write one plantuml graph and generate different versions of it (complete, part a, part b…)

mdpre doesn’t really come into play here - particularly as I can’t assume it is run to create the input to md2pptx. (In my personal, extensive, use it generally is.)

Further, mdpre would pass through any <pre> HTML elements, whether they contained <span> elements or not.

One last point on mdpre: It has a =include semantic - which I use quite a bit. (Some of my customer workshop presentations have educational material I pull in this way - and Keyboard Maestro sets this all up, a big time saver.)

Back to <pre>: This HTML element is 5 characters, 6 including newline, and is perfectly legitimate in Markdown. It can include <span> elements and they are treated properly.

As for styling - which is the whole point:

  • Outside of md2pptx, including in Drafts, you can use CSS. md2pptx will ignore inline CSS.
  • In md2pptx there are metadata items, keying off class, that colour foreground or background. These are ignored by eg Drafts.

And, yes, I use =include In mdpre to bring in both CSS and the above-mentioned metadata. So I can target both md2pptx and eg Marked.

From the Drafts point of view, CSS is the thing driven by <span> elements within <pre>.

(EDIT: I should’ve said that Codye is a very nice way to add styling to code - on MacOS and iOS/iPad OS - but that I’m more likely to provide my own and it need not be programming syntax so much as character-mode screen shots. But you still have to supply the CSS / metadata - perhaps based on the colour swatches Codye supplies.)

1 Like

One problem I found is that in Drafts a blank line in a <pre> block can terminate the pre block in a weird way.

The following works in BBEdit, for instance, but not in Drafts or Marked 2:

### This is a title

<span class="hljs-comment"># Clone a shape in a slide and return the new shape.</span>
<span class="hljs-comment"># (This is a deep copy so the new shape will have the same</span>
<span class="hljs-comment"># eg bullet style as the source shape)</span> 
def addClonedShape(slide, shape1):

<span class="hljs-comment"># Clone the element for the shape</span>
el1 = shape1.element
el2 = copy.deepcopy(el1)

<span class="hljs-comment"># Insert the cloned element into the shape tree</span>

The blank line throws off the formatting. If I stick a &nbsp; on the blank line all is OK.

I’ll have to research the expected behaviour - but might not come to any resolution. In any case I can make md2pptx handle the blank line the way I want - leaving it as a blank line.

So where I am now is <code> and <pre> both act like the “four spaces” code block. I intend to enable at very least <span> support in the latter.

I should probably special case &nbsp;on it’s own line to just give an empty line - so copying and pasting out of a presentation gives the desired effect.

And I should probably enable triple backtick code block demarcation.

The net will be an improvement in putting code and terminal examples in a presentation. (In support of “terminal” I should probably automatically adjust the font size to fit the whole thing on a slide - one day.)

So <span>-within-<pre> got done. Also you can now use triple backticks or <code> - with the expected semantic. (So, with mdpre’s =include you can embed a code snippet without indenting it or editing it.)

Also I solved a related problem: Previously a slide had to start with Markdown heading. Now it can start with a <hr/>, or the 3 Markdown ways: ---, ***, and ___. (Yes these lines can be longer than 3 characters.)

(Another method that now works is coding on a single line the following ### &nbsp;. In both Drafts and md2pptx this produces a blank line but in md2pptx this is enough to cause a new slide to start.)

Anyhow shipped yesterday in md2pptx 1.9.2.

I think there will be tweaks, as people start to beat on it. (Mostly me…) :slight_smile:

And the relevance to Drafts is that all the above works well in a draft - which is a major design aim of md2pptx.

1 Like