search

LeaVerou / md-block

A custom element for rendering stylable (light DOM) Markdown
https://md-block.verou.me
MIT License
322 stars 17 forks source link

How to use md-block with a syntax highlighter? #12

Closed just-ero closed 1 year ago

just-ero commented 1 year ago

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!");

LeaVerou commented 1 year ago

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).