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^)/
まだデータがありません。
-
-
ロリポップからエックスサーバーに移転した理由
サーバーを移転しました。 ロリポップの契約がちょうど半年を迎えたので、これを機にサーバーをエックスサーバーに移転することにしました。 …
-
-
ブログ開始1年経過。1年間で最も読まれた記事ランキングTOP20!
ハイサイ!ショウ(@OKI_NOTE)です。 ブログの運営を開始してはや1年が過ぎました。 今回は、この1年間で書いた記事の中で閲覧数が高い記事のTOP20を紹介したいと思…
-
-
Stinger3から乗り換えずにStinger5のメリットを取り入れよう
レスポンシブデザインの魅力 ブログデザインの骨格でもあるテーマ。このブログは開設当初からStinger3を使用していますが、Stinger5がリリースされたことで乗り換えようか迷…
-
-
ブログ連続更新100日突破して思うこと。生い立ちから振り返ってみる。
OKINOTEを始めてから早100日。 毎日更新を目標にして気づけば100日目になりました。 100日連続更…
-
-
ブログ初心者の執筆効率化に最適!ユーザー辞書よりDASHを導入しよう!
ハイサイ!ショウ(@OKI_NOTE)です。 ブログ効率化を図るために、以下の記事を読んで導入したMacアプリ「DASH」が便利すぎて感動しました!(いまさら) &nb…
-
-
記事タイトル悩んでる?惹きつけるタイトルは雑誌の見出しから学べ!
そのタイトル、自己満じゃありませんか? ハイサイ!タイトルセンス初級レベルのショウ(@OKI_NOTE)です。 記事を書いたときに、タイトルで悩むことってよくありま…
-
-
ブログデザイン更新。固定ヘッダー&ドロワーメニューとスライダーを追加!
Stinger3に、話題のWordpressテーマ「ハミングバード」のようなスライダーを追加。固定ヘッダーとドロワーメニューも導入しました。どんなデザインになったのか。使ったツールの紹介をします。…
-
-
OKINOTE ロゴ デザインしました。
サイトのイメージをロゴに表現してみました。 『OKINOTE』 このブログのタイトルにもなっているOKINOTE(オキノート)。 僕が沖縄出身であること、ノートみたい…
-
-
SEO的な観点から過去記事の修正はNG?
このブログの運営を始めて半年以上経過し記事も250以上になりました。 検索流入が9割を占める当ブログ。 月間1…
-
-
写真多用ブロガーにおすすめ!『するぷろ』の真骨頂は画像リサイズにあり
するぷろを1週間して使用してみて思ったこと ハイサイ!今月モブログデビューをしたショウ(@OKI_NOTE)です。 モブログという言葉に馴染みのない…