Callouts in code

feature
1

Hi,

I was wondering if anyone has figured out a way to include callouts in code segments in Hugo. These are supported in AsciiDoc but not in Markdown. I think it should be possible to implement something using a shortcode, but I thought I’d ask before I start coding :slight_smile:

Thanks!

1 Like
2

This feature exists in mmark, a fork of the BlackFriday Markdown renderer with a focus on creating engineering documents, and recent versions of Hugo support that. Simply rename your .md file to .mmark and it should work. However, Mmark hasn’t been kept up-to-date with BlackFriday and doesn’t support some things like latex-style dashes, smart quotes, or fractions.

3

Thanks for the pointer! I will check it out.

4

Funny that I am trying to figure some way of integrating Org mode coderef in ox-hugo exported Markdown, find out what that’s called in non-Org lingo (“callouts”), and I end up here :stuck_out_tongue:.

5

@bep

To give more context to this, currently, below in Markdown:

{{< highlight emacs-lisp "linenos=table, linenostart=1" >}}
(save-excursion
   (goto-char (point-min))
{{< /highlight >}}

generates (using Chroma):

<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre class="chroma"><code class="language-emacs-lisp" data-lang="emacs-lisp"><span class="lnt">1
</span><span class="lnt">2
</span></code></pre></td>
<td class="lntd">
<pre class="chroma"><code class="language-emacs-lisp" data-lang="emacs-lisp"><span class="p">(</span><span class="nb">save-excursion</span>
   <span class="p">(</span><span class="nf">goto-char</span> <span class="p">(</span><span class="nf">point-min</span><span class="p">))</span></code></pre></td></tr></table>
</div>
</div>

To implement this callouts feature, below:

{{< highlight emacs-lisp "linenos=table, linenostart=1" >}}
(save-excursion ;; <1>
   (goto-char (point-min)) ;; <foo> <bar>
{{< /highlight >}}

needs to translate to something like:

<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre class="chroma"><code class="language-emacs-lisp" data-lang="emacs-lisp"><span class="lnt">1
</span><span class="lnt">2
</span></code></pre></td>
<td class="lntd">
<pre class="chroma"><code class="language-emacs-lisp" data-lang="emacs-lisp"><span class="coderef_1"><span class="p">(</span><span class="nb">save-excursion</span></span>
   <span class="coderef_foo coderef_bar"><span class="p">(</span><span class="nf">goto-char</span> <span class="p">(</span><span class="nf">point-min</span><span class="p">))</span></span></code></pre></td></tr></table>
</div>
</div>

Notice the additional wrapping of these spans:

  • <span class="coderef_1"> … </span>
  • <span class="coderef_foo coderef_bar"> … </span>

So the question is… does this fall under the realm of Blackfriday or Hugo? Asking because this also integrates/retains the Chroma classes.