<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.18.1/styles/dracula.min.css">
</head>
<body>
<p>サンプルコードを紹介します。</p>
  <pre><code>var foo = function (bar) {
      return bar++;
  };</code></pre>
  
  <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.18.1/highlight.min.js"></script>
  <script>hljs.initHighlightingOnLoad();</script>
</body>

pre {
  margin: 1em 0; /* ブロック前後の余白 */
  padding: 1em; /* ブロック内の余白 */
  border-radius: 5px; /* 角丸 */
  background: #25292f; /* 背景色 */
  color: #fff; /* 文字色 */
  white-space: pre-wrap; /* はみ出たときに折り返す */
  max-width: 350px;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.