Stingerにソースコードを表示する『Highlight.js』を実装しました

: 2015/11/02 : 7 ブログ

ソースコードを表示 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」があります。

 

ソースコードを表示  Google Code Prettify

 

色々と試した結果、最終的に「Highlight.js」を使用することにしました。

軽量であること、使用が簡単なこと、好みのデザインがあること、機能が少なくていいことが決め手でした。使用する環境や条件によっては他の利用を検討してみるのも全然ありだと思います。

 

ソースコードをハイライトする軽量ライブラリ、Highlight.jsの使い方ソースコードをハイライトする軽量ライブラリ、Highlight.jsの使い方

プログラムの解説記事を作るとき、ユーザーが見やすいように、ソースコードをハイライトする(色を付ける)には…

 

ちなみに「Google Code Prettify」を実装するときはこちらがとても参考になりました。

 

ソースコードをハイライトする google-code-prettify の設置方法 | 高密度商業地域 > ホームページ作成ソースコードをハイライトする google-code-prettify の設置方法 | 高密度商業地域 > ホームページ作成

いわゆるテキストエディタのようなかたちでソースコードをハイライトし…

 

ここでは僕が利用しているHighlight.jsの実装するまでの流れを紹介したいと思います。

 

Highlight.jsの実装の方法

 

参考にさせて頂いた記事がこちら。
こちらよりコードを引用し、変更を多少加えて実装しています。

 

htmlやCSSなどのソースコードをWeb上でハイライト表示する方法 | Glow-FactoryhtmlやCSSなどのソースコードをWeb上でハイライト表示する方法 | Glow-Factory

HTMLやCSSなどのソースコードをハイライト表示する方法のご紹介です。

 

 

必要ファイルをダウンロードする

まずhead.phpファイル内に必要ファイルを読み込む必要があります。ファイル先をリンクを指定して読み込むことができますが、僕の場合スタイルシートに変更を加えたかったので、CSSファイルをダウンロードしてサーバーから直接読み込むことにしました。

Highlight.jsのファイルはこちらからダウンロードできます。

 

ソースコードを表示 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つの道の駅で味わえる「おいしいもの」を食べに行こう (外部リンク)

  

[随時更新]Amazonのほしい物リストを公開中!

スポンサーリンク

ad


シェア感謝です! \(^o^)/

本日の「ブログ」カテゴリ人気記事!
この記事似てるかも?
新しいサイトデザイン

ブログデザイン更新。固定ヘッダー&ドロワーメニューとスライダーを追加!

Stinger3に、話題のWordpressテーマ「ハミングバード」のようなスライダーを追加。固定ヘッダーとドロワーメニューも導入しました。どんなデザインになったのか。使ったツールの紹介をします。…

記事を読む

ブログエディタ『MarsEdit』の導入&初期設定方法.jpeg

オフラインでもブログスタイルを反映!MarsEditのプレビュー画面設定方法

  MarsEditはオフライン時スタイルが適用されない?   ハイサイ!ショウ(@OKI_NOTE)です。   最近MarsEditでブロ…

記事を読む

ブログエディタ『MarsEdit』の導入&初期設定方法.jpeg

30日の無料期間あり!ブログエディタ『MarsEdit』の導入&初期設定方法

  多くのブロガーが愛用している記事作成ツール「MarsEdit (マーズ・エディット)」。ブロガー必読のこちらの本にも利用のすすめが書かれていました。   必ず…

記事を読む

Mac ソフトツール appstorehelper

5秒でリンク作成できるアプリ紹介ツール『AppStoreHelper』が捗る!

    ブロガーの間では有名なアプリリンク作成ツールAppStoreHelper。   AppStoreHelperは、AppleのApp Store 、…

記事を読む

ブログ SEO アクセス

SEO的な観点から過去記事の修正はNG?

    このブログの運営を始めて半年以上経過し記事も250以上になりました。   検索流入が9割を占める当ブログ。   月間1…

記事を読む

Google AdSense アドセンス お知らせ

Google Adsenseが広告表示回数100万回の目標達成を祝ってくれたよ

  おや?アドセンスの様子が…   先日、いつものようにGoogle Adscense (グーグル・アドセンス)で本日の見積もり収益額を見ようと開いたらこんなポップが表示…

記事を読む

iplaywalk

音声で客観的に分析!読み上げアプリを使って自分のブログ記事を聴いてみたよ

※ワケあっていつもと雰囲気を変えています。   ウェウェウェーイ!諸行無常、盛者必衰の理をあらわすショウ(@OKI_NOTE)です。   前回、記事タイトル…

記事を読む

2014年買ってよかったものまとめ BOSEスピーカー

【2014年】買ってよかったものまとめ

  2014年はブログを始めた年でもあったのですが、なんだかんだであっという間に過ぎました。当ブログでも紹介した商品もありますが、2014年買ってよかったものを7つ紹介したいと…

記事を読む

computer

ブログはじめました。

  きっかけはひとつの記事。   ーインターネット文化における「1%ルール」とは? / GIGAZINE photo credit: ingrid eu…

記事を読む

ブログ ツール

ブログ記事作成が捗る!5万PV達成した僕が使っている無料ツール7つ

  2014年1月からOKINOTEを始めてそろそろ半年になります。 おかげさまで、多くの方々に見てもらえるブログに順調に成長してきました。    …

記事を読む

ad

ケータリングサービスinOIST
上間弁当てんぷらの新サービスがお洒落すぎて紹介せずにはいられない

弁当や惣菜でおなじみの「上間弁当てんぷら」が新ケータリングサービス"C…

名護城公園ビジターセンターSubaco(すばこ)
こんなところに!沖縄建築賞受賞の穴場カフェ『名護城公園ビジターセンター』

2015年7月にオープンした新施設「名護城公園ビジターセンター Sub…

2016年買ってよかったものまとめ
カメラ機材とおつまみ。2016年買ってよかったものまとめ

振り返りの季節。2016年は、物はそんなに買っていないものの、一眼レフ…

くもじイルミネーション
【画像】都会にも冬の訪れ。那覇パレットくもじのイルミネーション

パレットくもじから国道58号線の久茂地交差点周辺を、約5万の電飾で彩る…

2016-1220.12.jpg
浜比嘉島に行く理由をみーつけた。鍋やBBQもできるおしゃれなホテル「トリップショットヴィラズ・ハマヒガ」

神聖な場所としてのイメージが強い浜比嘉島。今年の8月、ここにプライベー…

かりゆしミリオンファンタジー
【画像】140万球のイルミネーションが無料!恩納村の「かりゆしビーチリゾート・オーシャンスパ」

沖縄の3大イルミネーションの1つ、かりゆしビーチリゾートの「ミリオンフ…

ブルーシール
【画像】ずっと見ていたい。ブルーシール牧港本店のイルミネーション

11月1日に点灯式が開催されイルミネーションで彩られるブルーシール牧港…

  • LINE スタンプ記事一覧へ ニューヨークの記事一覧へ 沖縄関連の記事へ starbucksの記事へ EOS70Dの記事へ