Showdown: Support for code highlighting in githubCodeBlocks

[vithar]

Do you plan to add support for syntax highlighting in githubCodeBlocks?

Something like this:

if (options.highlight) {
  codeblock = options.highlight(codeblock, language) || codeblock;
}

I can send PR.

[tivie]

Check https://github.com/showdownjs/prettify-extension

[vithar]

I seen this. But I think highlighting hook in githubCodeBlocks.js (where we know exact code block and language) will be more effective than using regexp to process ALL output.

[vithar]

prettify works only in browser, but I want to highlight code in NodeJS.

[tivie]

@vithar What do you mean by highlighting code in NodeJS?!

[matatk]

I was hoping that it might be possible to have a showdown extension that puts all the required highlighting markup into the HTML, so only CSS, and no JavaScript, is required on the browser to render the highlighted code.

That's how it works with Pandoc: when Pandoc converts the Markdown to HTML, it adds in the required HTML code for each token in the code, and the CSS highlights the tokens however the user would like.

Perhaps this is what @vithar is asking for? I think it'd be great to have such a feature, too.

[vithar]

Thanks, this is exactly that I mean.

[tivie]

I'm not sure what kind of HTML wizardry pandoc does. However, Showdown already adds classes to code blocks pertaining the language used.

for instance, this block...

``````

function foo() {
  var bar = 'bar';
  return bar;
}

``````

gets converted into the following HTML:

<pre><code class="javascript language-javascript">function foo() {
  var bar = 'bar';
  return bar;
}</code></pre>

[matatk]

With the same input, Pandoc uses a syntax-highlighting library to produce the following HTML. The HTML is marked up in the way that Pygments would do so (but as Pandoc is written in Haskell, as opposed to Python, it uses an equivalent Haskell library to do this).

<div class="sourceCode"><pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="kw">function</span> <span class="at">foo</span>() <span class="op">{</span>
  <span class="kw">var</span> bar <span class="op">=</span> <span class="st">&#39;bar&#39;</span><span class="op">;</span>
    <span class="cf">return</span> bar<span class="op">;</span>
  <span class="op">}</span></code></pre></div>

Here's some of the CSS that goes with this HTML to actually perform the highlighting. Any CSS that assumes Pigments 'hints' have been added to the HTML would work.

. . .
code > span.kw { color: #007020; font-weight: bold; } /* Keyword */
code > span.dt { color: #902000; } /* DataType */
code > span.dv { color: #40a070; } /* DecVal */
code > span.bn { color: #40a070; } /* BaseN */
code > span.fl { color: #40a070; } /* Float */
code > span.ch { color: #4070a0; } /* Char */
code > span.st { color: #4070a0; } /* String */
code > span.co { color: #60a0b0; font-style: italic; } /* Comment */
. . .

I've been trying to find an equivalent in JavaScript but most seem to take the approach that showdown-prettify does, which is to run some JS to inject the extra 'highlighting hints' HTML markup at runtime in the browser. There is a wrapper for Pygments itself, but ideally I'd like to find an all-JavaScript solution, to avoid extra dependencies.

[tivie]

@matatk Ah I see. Well, this is the kind of job for an extension.

[vithar]

@matatk you can use marked

[tivie]

Making an extension for code highlighting would be kind of easy with the new showdown's extended RegExp engine.

example using https://highlightjs.org/ library:

showdown.extension('codehighlight', function() {
  function htmlunencode(text) {
    return (
      text
        .replace(/&/g, '&')
        .replace(/&lt;/g, '<')
        .replace(/&gt;/g, '>')
      );
  }
  return [
    {
      type: 'output',
      filter: function (text, converter, options) {
        // use new shodown's regexp engine to conditionally parse codeblocks
        var left  = '<pre><code\\b[^>]*>',
            right = '</code></pre>',
            flags = 'g',
            replacement = function (wholeMatch, match, left, right) {
              // unescape match to prevent double escaping
              match = htmlunencode(match);
              return left + hljs.highlightAuto(match).value + right;
            };
        return showdown.helper.replaceRecursiveRegExp(text, replacement, left, right, flags);
      }
    }
  ];
});

[ghost]

@tivie Thank you Estevão !

[IonicaBizau]

@tivie How can I make this to support custom languages (not Auto)? Thanks!

[tivie]

@IonicaBizau Check the highlight documentation. https://highlightjs.org/usage/

[IonicaBizau]

@JerryYangJin By coincidence I'm working right now on a showdown extension for highlighting. I have a working prototype. :grin:

[JerryYangJin]

@IonicaBizau , thanks for the reply, i deleted my previous comments, as @tivie 's extension is still working, I 'm using prettify extionsion at the same time, so need a little bit change in the change, then it works perfectly.

[gozeon]

see doc

hljs.initHighlightingOnLoad();