初心者のWEBデザイン

HTML,CSS、その他WEBデザインに関する事を記述していきます.

HTML シンタックスハイライトを使用する方法

htmlに凄く簡単にシンタックスハイライトを実装できます。

highlight.js
highlightjs.org

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.6/styles/default.min.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.6/highlight.min.js"></script>
  <script>hljs.initHighlightingOnLoad();</script>
</head>
<body>
    <pre>
      <code>
           //ここにコードを記述
      </code>
    </pre>
</body>
</html>
パレットの変更

パレットの変更は、指定するファイル名を変更します。
highlight.jsはパレットも豊富です。
default.css->atelier-sulphurpool.dark.css

言語の設定

言語設定は自動で行ってもらえます。もし、期待通りのハイライト表示ができない場合は次のように code タグの class 属性で言語を指定することもできます。

<pre><code class="python">...</code></pre>