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; }
![管理人](http://i1.wp.com/okinote.com/wp-content/themes/stinger3ver20131217/images/profile.gif?w=800)
テーマ名、和訳をしたら「明日の夜」。
合わせてこちらもどうぞ:
OKINOTEからお知らせ
沖縄の役立つリンクまとめ始めました。
沖縄ファミリーマート初寄稿記事 !沖縄の道の駅を取材しました。
地元ンチュがおすすめ!許田、糸満、ぎのざ・・7つの道の駅で味わえる「おいしいもの」を食べに行こう (外部リンク)
スポンサーリンク
ad
シェア感謝です! \(^o^)/
まだデータがありません。
-
-
ブログ開始1年経過。1年間で最も読まれた記事ランキングTOP20!
ハイサイ!ショウ(@OKI_NOTE)です。 ブログの運営を開始してはや1年が過ぎました。 今回は、この1年間で書いた記事の中で閲覧数が高い記事のTOP20を紹介したいと思…
-
-
ロリポップからエックスサーバーに移転した理由
サーバーを移転しました。 ロリポップの契約がちょうど半年を迎えたので、これを機にサーバーをエックスサーバーに移転することにしました。 …
-
-
オフラインでもブログスタイルを反映!MarsEditのプレビュー画面設定方法
MarsEditはオフライン時スタイルが適用されない? ハイサイ!ショウ(@OKI_NOTE)です。 最近MarsEditでブロ…
-
-
写真多用ブロガーにおすすめ!『するぷろ』の真骨頂は画像リサイズにあり
するぷろを1週間して使用してみて思ったこと ハイサイ!今月モブログデビューをしたショウ(@OKI_NOTE)です。 モブログという言葉に馴染みのない…
-
-
過去記事を一括修正!文字列を置換で画像差し替えも可能なプラグイン
ハイサイ!ショウ(@OKI_NOTE)です。 ブログを書いていると、たまーに過去に投稿した内容を見返したりするのですが、内容を修正したい記事がけっこうあります。1記事程度の修…
-
-
LINE自作スタンプクリエイター向け。2,000円から広告販売始めました。
今月で半年を迎えるこのブログ。 おかげさまでアクセス数が順調に伸びており、7万PVを突破しました。 …
-
-
30日の無料期間あり!ブログエディタ『MarsEdit』の導入&初期設定方法
多くのブロガーが愛用している記事作成ツール「MarsEdit (マーズ・エディット)」。ブロガー必読のこちらの本にも利用のすすめが書かれていました。 必ず…
-
-
SEO的な観点から過去記事の修正はNG?
このブログの運営を始めて半年以上経過し記事も250以上になりました。 検索流入が9割を占める当ブログ。 月間1…
-
-
月間160万PVのプロプロガー”立花岳志”氏の7つ道具
立花岳志さんといえば、「No Second Life」というサイトの管理人で月間160万PVを突破するプロプロガーです。 アップル系ガジェットやネット関連、書評、ライフハック…
-
-
ブロガーに朗報!ゲッティイメージズが提供する高品質画像が非商用で埋込み可能に
写真・動画の著作権使用権利などのサービスを行っているGetty Images(ゲッティイメージズ)。 3月6日に非商用目的に限り、写真の埋め込みツール…