Highlighting single word within markdown code block

1

I am trying to highlight a single word in a code block generated by kramdown. For reasons not worth explaining here, I would like to do this by explicitly embedding the html span element within the code block in the markdown file. The kramdown docs appear to support embedding html inside block and span level markdown but I can’t quite seem to get this work. Here is my content.md markdown file:

~~~
def <span style="color: red;" markdown="span">function</span>():
	print('hello')
~~~

Once I compile using kramdown content.md>content.html on a windows machine, I expect to get the following:

<pre><code>def <span style="color: red;" markdown="span">function</span>():
	print('hello')
</code></pre>

However what I get instead is something like this:

<pre><code>def &lt;span style="color: red;" markdown="span"&gt;function&lt;/span&gt;():
	print('hello')
</code></pre>

Which is not what I want. I have tried using the markdown attribute with all of "0", "1", "span" and "block" as values to no avail. What am I missing here?

2

The problem is that Markdown code-blocks display the code as text, so any HTML inside a code-block will appear as-is on the web page. I.e. the code will be automatically quoted to prevent the browser from interpreting it as HTML.

One work-around is to forgo Markdown and output the <pre><code> tags yourself. However, you’d have to be careful to manually quote special HTML characters, like < and >. That might make this work-around impractical.

Note that Kramdown can perform code high-lighting, which automatically adds semantic spans to code for highlighting. For example, in the following, the function name has a span of class hljs-title, which is styled as bold red on this site:

~~~python
def function():
    print('hello')
~~~

def function():
    print('hello')
3

hljs is highlight.js

https://highlightjs.org/

If your problem is HTML < and > getting escaped incorrectly

Maybe you could store your values as frontmatter

Then have it appear on the page as literal text.

I am not familiar with the Kramdown flow though

Also consider using Jekyll highlight tag or code fence blocks which is Liquid and gets specific languages.

4

Ah, you’re right @MichaelCurrin – I got myself confused by looking at how this Discourse forum renders code-blocks. In Jekyll, Kramdown uses Rouge to highlight code blocks, which adds classes like kd and nx to keywords and names.