SyntaxHighlighterがなくなっていた！ [ WEB ]

なんか、このブログの雰囲気が前と違うようなとは思っていたものの。。。

SyntaxHighlighterがなくなっていたとは！！

しかも、CDNでリンクしていたので、ページ表示がめちゃくちゃ重くなってた（笑）

なので、highlight.jsを使うことにする。

まずはUsageのページに従って、ヘッダーに以下を追加する。

スタイルは、Demoページから好きなのを見つけるのだ。

今回は、Draculaにしてみた。スタイルシートのファイル名は小文字で始まるらしい。なので「dracula.min.css」とする。

そして、言語別にjavascriptを追加するらしい。

ここではPythonを追加してみた！こちらもファイル名は「python.min.js」となる。

<link rel="stylesheet"
      href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.0.0/styles/dracula.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.0.0/highlight.min.js"></script>
<!-- 個別に使用する言語を追加する -->
<script charset="UTF-8" src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.0.0/languages/python.min.js"></script>
<script>hljs.highlightAll();</script>

後はハイライトさせたいコードのところで、

(コード自体はテキトーに書いて実験！)

<pre><code class="python">
class HelloWorld:
    def hello(self):
        print("Hello,World!")

if __name__ == "__main__":
    h = HelloWorld()
    h.hello()
</code></pre>

のように、<pre>タグと<code>タグで囲む。

で、<code>タグのclass属性をその言語にするだけ！

はい、出来上がり★

class HelloWorld:
    def hello(self):
        print("Hello,World!")

if __name__ == "__main__":
    h = HelloWorld()
    h.hello()

ふんどしの持ち主

• highlight.js