gnab / remark

A simple, in-browser, markdown-driven slideshow tool.
http://remarkjs.com
MIT License
12.68k stars 856 forks source link

other source code syntax highlighter #444

Open flashpixx opened 7 years ago

flashpixx commented 7 years ago

Hello,

I'm using remarkjs for the first time and it is very nice to use, but on my website I'm using http://prismjs.com/ for syntax highlighting. I have defined for my own languages my own coding styles, but remarkjs supports Hightlight.js only. I try to disable it, but I need for Prism the native <pre> and <code> tags. Is there a possibility for disabeling Hightlight.js so that the code tags exists only?

benjie commented 6 years ago

I've managed to enable this for my presentation by replacing the remark.highlighter.engine.highlightBlock function:

    <script type="application/javascript" src="prism.min.js" data-manual></script>
    <script type="application/javascript" src="prism-graphql.min.js"></script>
    <script type="application/javascript" src="prism-jsx.min.js"></script>
    <script type="application/javascript" src="prism-json.min.js"></script>
    <script type="application/javascript">
      function parseLanguage(lang) {
        return {
          js: 'jsx',
        }[lang] || lang;
      }
      remark.highlighter.engine.highlightBlock = block => {
        const language = parseLanguage(block.className.split(" ")[0]);
        const prismLang = Prism.languages[language];
        if (prismLang) {
          block.parentNode.className = `${block.parentNode.className} language-${language}`;
          block.innerHTML = Prism.highlight(block.textContent, prismLang);
        } else {
          console.warn(`Language '${language}' not supported?`)
        }
      };
benjie commented 6 years ago

(See #461 for a better version which also handles the issue with line-breaks sometimes breaking code formatting.)