Rensaba+WordPress.net

初心者向けのエックスサーバーの使い方 レンタルサーバーとワードプレス.net

サーバー関係

軽量で動作が速いHighlight.jsをサーバーにアップして使ってます

投稿日: 更新日:

ソースコードをキレイに表示したいって思って、Highlight.jsを使い始めたんだけど、とっても簡単だったんです。だけど、highlight.js をダウンロードしてレンタルサーバーにアップロードしていなかったんです。

サーバーにアップしなくてもHighlight.jsが使える

<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>

を貼っただけで、あとは記事のソースコードを<pre><code> </code></pre>で囲んだだけなんです。これだけなんです。それで、思わず、過去記事のソースコードを修正しちゃったんです。ブログの記事にソースコードを書くときって、<pre><code> </code></pre>が必要だったってことなのかな?

レンタルサーバーにHighlight.jsをアップしたので下記に変更したんです。

<link rel="stylesheet" href="/highlight/styles/github.css">
<script src="/highlight/highlight.pack.js"></script>
<script>hljs.initHighlightingOnLoad();</script>

サーバーにアップした方がHighlight.jsの動作が速いってこと?

「wp-admin」「wp-content」「wp-includes」のあるルートに「highlight」というフォルダを作成しました。「highlight」内に「highlight.pack.js」をアップしています。「highlight」内に「styles」というフォルダを作成し、その中に「github.css」をアップしています。

default.cssではなく、github.cssに変更していますが、他にもたくさんありますので、どれにするか決まるまで、ダウンロードしたHighlight.jsの「styles」をフォルダごとアップしておいてもいいと思います。

コードのハイライト表示用 JS ライブラリ highlight.js の使い方 - Qiita
ソースコードをハイライトする軽量ライブラリ、Highlight.jsの使い方


-サーバー関係

Copyright© Rensaba+WordPress.net , 2018 All Rights Reserved.