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^)/

本日の「ブログ」カテゴリ人気記事!
この記事似てるかも?
OKINOTE ロリポップ Xサーバー Wordpress

ロリポップからエックスサーバーに移転した理由

    サーバーを移転しました。   ロリポップの契約がちょうど半年を迎えたので、これを機にサーバーをエックスサーバーに移転することにしました。 …

記事を読む

2014-0309 copy

月間160万PVのプロプロガー”立花岳志”氏の7つ道具

  立花岳志さんといえば、「No Second Life」というサイトの管理人で月間160万PVを突破するプロプロガーです。 アップル系ガジェットやネット関連、書評、ライフハック…

記事を読む

Mac ソフトツール appstorehelper

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

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

記事を読む

Google AdSense アドセンス お知らせ

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

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

記事を読む

ブログ ツール

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

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

記事を読む

iPhoneアプリ「するぷろ」

写真多用ブロガーにおすすめ!『するぷろ』の真骨頂は画像リサイズにあり

  するぷろを1週間して使用してみて思ったこと   ハイサイ!今月モブログデビューをしたショウ(@OKI_NOTE)です。 モブログという言葉に馴染みのない…

記事を読む

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

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

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

記事を読む

Stinger5

Stinger3から乗り換えずにStinger5のメリットを取り入れよう

レスポンシブデザインの魅力   ブログデザインの骨格でもあるテーマ。このブログは開設当初からStinger3を使用していますが、Stinger5がリリースされたことで乗り換えようか迷…

記事を読む

computer

ブログはじめました。

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

記事を読む

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

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

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

記事を読む

ad

糸満の電照菊
秋夜彩る電照菊。南部有数の糸満市小波蔵はドライブコースに最適

  涼しくなってきたこの時期。いかとお過ごしで…

「美らイチゴ糸満農園」
予約不要でいちご狩り。南部に「美らイチゴ糸満農園」がオープン!

2017年2月15日に開園した新いちご狩りスポットに行ってきました。予…

ルネッサンスリゾートオキナワのイルミネーション
プールに浮かぶ青イルカ。ホテル『ルネッサンスリゾート』のイルミネーション

大きく光る「R」のロゴ。ホテルのビーチエリアに約8万球の明かりが灯りま…

中国式庭園・福州園のライトアップ
日本百名月に認定。那覇市『福州園』の夜間特別ライトアップ

異国情緒あふれる那覇市『福州園』。ライトアップイベントは、2016年度…

2017-0327.4.jpg
海も見渡せる沖縄最北端の花カーニバル『東村つつじ祭り』に行ってきた。

那覇から片道2時間半。沖縄最北端の花カーニバル『東村つつじ祭り』に行っ…

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

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

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

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

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