javascriptとCSSを併用すればきれいに表示できるのですが、一から作りこむとなると一苦労です。
シンタックスハイライトというものを利用すればきれいにコードを表示できるようで、いろいろ試しましたが、highlight.jsが動作が軽かったので当ブログにも設定してみました。
コードの取得
highlight.js のサイトにアクセスしてCDNコードの取得これにより、自分でjsファイルやcssファイルをアップロードしなくても使用することができますが、読み込みに時間がかかる場合があるので、ソースに導入する場合は、設置する場所が重要になってきます。
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.9.0/styles/default.min.css"/>
<script src="http://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.9.0/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>設定
取得したコードを<head></head>タグの中に張り付ける。
使用方法
使用するコードを<pre><code>～</code></pre>で囲む
<pre><code>
//使用するコード
</code></pre>サイトの速度を早くしたい場合
上記に示したコードを</body>タグの直前に設置するほうが、ページ全体の読み込みが早くなるようです。
以上、参考にしていただけたら幸いです。
＜２０１７．３．３０追記＞
文章を追加しました。
0 件のコメント:
コメントを投稿