LeaVerou / md-block

A custom element for rendering stylable (light DOM) Markdown

Home Page:https://md-block.verou.me

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

How to use md-block with a syntax highlighter?

just-ero opened this issue · comments

commented

How would one achieve this? I've tried highlight.js, which didn't appear to do anything at all.

Here's my attempt;

<!DOCTYPE html>
<html>
<head>
  <script type="module" src="https://md-block.verou.me/md-block.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/default.min.css" />
</head>

<body>
  <md-block>
    ```cs
    Console.WriteLine("Hello, world!");
    ```
  </md-block>
</body>
</html>

Md-block supports Prism out of the box, if you import it will automatically use it.
For other highlighters, you can listen to the md-render event and invoke them then (or import them then).