HTML内でソースコードをhighlightさせたい

// header
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.18.1/styles/dracula.min.css">

// footer
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.18.1/highlight.min.js"></script>
  <script>hljs.initHighlightingOnLoad();</script>

bluma cssを使っていると、paddingが設定されているので、0で!importantで設定する

pre {
  margin: 0 0; 
  padding: 0 !important; 
  border-radius: 0px; 
  white-space: pre-wrap;
  max-width: 100%;
}

### 使い方
preとcodeで囲う

        <h6 class="has-text-weight-medium">Result</h6>
        <pre><code>{
  "data": {
    "speech": {
      "id": 2,
      "text": "  びっくりしました。\n",
      "time": "2021/11/01 15:04:12"
    }
  }
}
        </code></pre>

highlightの箇所があってませんが、まあそれらしく表示されているのでOKとしましょう。