Stingerにソースコードを表示する『Highlight.js』を実装しました
カスタマイズで必至のソースコード表示
ブログがある程度落ち着いてきたらレイアウトやデザインを変更するカスタマイズに挑戦したくなりますよね。このブログもたくさんのStingerブログを参考にさせて頂いて今のデザインに落ち着きました。
HtmlやCSSの知識がない初心者でも、アップされているソースコードを参考にすれば、デザインのカスタマイズができます。ソースコードを表示しているブログにはいろいろと(勝手に)お世話になりました。
このブログではカスタマイズ系の記事を取り扱わないのですが、記録用として、これまで参考にさせて頂いたブログへの恩返しを兼ねて、ソースコードを表示していきたいなと思うようになりました。こういうやつですね。
.appinfo { border: 3px solid #001D87; width: 100%; margin-bottom: 10px; overflow: auto; background: url(images/stripe2.png) repeat; }
今回はソースコードを表示する機能を導入するまでの流れを書きたいと思います。
スポンサーリンク
表示するライブラリを選択しよう
ソースコードを表示する代表的なライブラリには、プラグインで実装する「WP Code Prettify」と「SyntaxHighlighter」、必要ファイルを直接書き込む「Highlight.js」と「Google Code Prettify」があります。
色々と試した結果、最終的に「Highlight.js」を使用することにしました。
軽量であること、使用が簡単なこと、好みのデザインがあること、機能が少なくていいことが決め手でした。使用する環境や条件によっては他の利用を検討してみるのも全然ありだと思います。
ソースコードをハイライトする軽量ライブラリ、Highlight.jsの使い方
プログラムの解説記事を作るとき、ユーザーが見やすいように、ソースコードをハイライトする(色を付ける)には…
ちなみに「Google Code Prettify」を実装するときはこちらがとても参考になりました。
ソースコードをハイライトする google-code-prettify の設置方法 | 高密度商業地域 > ホームページ作成
いわゆるテキストエディタのようなかたちでソースコードをハイライトし…
ここでは僕が利用しているHighlight.jsの実装するまでの流れを紹介したいと思います。
Highlight.jsの実装の方法
参考にさせて頂いた記事がこちら。
こちらよりコードを引用し、変更を多少加えて実装しています。
htmlやCSSなどのソースコードをWeb上でハイライト表示する方法 | Glow-Factory
HTMLやCSSなどのソースコードをハイライト表示する方法のご紹介です。
必要ファイルをダウンロードする
まずhead.phpファイル内に必要ファイルを読み込む必要があります。ファイル先をリンクを指定して読み込むことができますが、僕の場合スタイルシートに変更を加えたかったので、CSSファイルをダウンロードしてサーバーから直接読み込むことにしました。
Highlight.jsのファイルはこちらからダウンロードできます。
記述する言語を選択します。僕が使用するのはブログ内のソースぐらいなので、CSS、Html、JavaScript、PHPをダウンロードしておきました。zipファイルを解凍したら中にたくさんのテーマが確認できると思います。
head内に記述する
ブログの記事で読み込むようhead.phpのhead内に以下のソースを書き込みます。
<link rel="stylesheet" href="/tomorrow-night.css"> <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.4/highlight.min.js"></script>
tomorrow-night.cssとはテーマの1つです。お気に入りのデザインがあればこのファイル名を変更します。hrefにはファイルがあるパスを指定します。僕の場合はStinger3のテーマ内に直接放り込んでいるのでこちらになります。
<link href="<?php echo get_template_directory_uri(); ?>/tomorrow-night.css" type="text/css" rel="stylesheet" />
コードを省略する
上の記述だけで、ブログの記事に<pre>と<code>を使用してハイライト表示ができるようになりますが、2つのタグを使用しないといけないので、省略するために追加コードをhead内に埋め込みます。このブログのheadだとこうなります。
<link href="<?php echo get_template_directory_uri(); ?>/tomorrow-night.css" type="text/css" rel="stylesheet" /> <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.4/highlight.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" ></script> <script> $(function(){ $('pre').addClass('highlight'); $(".highlight").each(function(i, block) { hljs.highlightBlock(block); }); }); </script>
これで<pre></pre>で囲むだけでソースコードの表示ができるようになりました。参照元ではJavascriptの記載がされていますが、表示されない場合に記事内に書けばよいかと思います。
スタイルシートを調整する
スタイルシートはtomorrow-night.cssを利用し、そこに少し修正を加えています。ポイントはポップなフォントと、border-radiusの角丸です。あとはお好みで各タグの色を変更したら完了です!
.hljs { font-family: Menlo, 'Bitstream Vera Sans Mono', 'DejaVu Sans Mono', Monaco, Consolas, monospace; font-size: 13px; display: block; overflow-x: auto; background: #2d2d2d; color: #cccccc; padding: 15px; border-radius: 5px; -webkit-text-size-adjust: none; }

テーマ名、和訳をしたら「明日の夜」。
合わせてこちらもどうぞ:
OKINOTEからお知らせ
沖縄の役立つリンクまとめ始めました。
沖縄ファミリーマート初寄稿記事 !沖縄の道の駅を取材しました。
地元ンチュがおすすめ!許田、糸満、ぎのざ・・7つの道の駅で味わえる「おいしいもの」を食べに行こう (外部リンク)
スポンサーリンク
ad
シェア感謝です! \(^o^)/
-
-
5秒でリンク作成できるアプリ紹介ツール『AppStoreHelper』が捗る!
ブロガーの間では有名なアプリリンク作成ツールAppStoreHelper。 AppStoreHelperは、AppleのApp Store 、…
-
-
ブロガーに朗報!ゲッティイメージズが提供する高品質画像が非商用で埋込み可能に
写真・動画の著作権使用権利などのサービスを行っているGetty Images(ゲッティイメージズ)。 3月6日に非商用目的に限り、写真の埋め込みツール…
-
-
ブログはじめました。
きっかけはひとつの記事。 ーインターネット文化における「1%ルール」とは? / GIGAZINE photo credit: ingrid eu…
-
-
記事タイトル悩んでる?惹きつけるタイトルは雑誌の見出しから学べ!
そのタイトル、自己満じゃありませんか? ハイサイ!タイトルセンス初級レベルのショウ(@OKI_NOTE)です。 記事を書いたときに、タイトルで悩むことってよくありま…
-
-
OKINOTE ロゴ デザインしました。
サイトのイメージをロゴに表現してみました。 『OKINOTE』 このブログのタイトルにもなっているOKINOTE(オキノート)。 僕が沖縄出身であること、ノートみたい…
-
-
ロリポップからエックスサーバーに移転した理由
サーバーを移転しました。 ロリポップの契約がちょうど半年を迎えたので、これを機にサーバーをエックスサーバーに移転することにしました。 …
-
-
LINE自作スタンプクリエイター向け。2,000円から広告販売始めました。
今月で半年を迎えるこのブログ。 おかげさまでアクセス数が順調に伸びており、7万PVを突破しました。 …
-
-
SEO的な観点から過去記事の修正はNG?
このブログの運営を始めて半年以上経過し記事も250以上になりました。 検索流入が9割を占める当ブログ。 月間1…
-
-
オフラインでもブログスタイルを反映!MarsEditのプレビュー画面設定方法
MarsEditはオフライン時スタイルが適用されない? ハイサイ!ショウ(@OKI_NOTE)です。 最近MarsEditでブロ…
-
-
音声で客観的に分析!読み上げアプリを使って自分のブログ記事を聴いてみたよ
※ワケあっていつもと雰囲気を変えています。 ウェウェウェーイ!諸行無常、盛者必衰の理をあらわすショウ(@OKI_NOTE)です。 前回、記事タイトル…