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

本日の「ブログ」カテゴリ人気記事!
この記事似てるかも?
Mac ソフトツール appstorehelper

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

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

記事を読む

2014-0307.4

ブロガーに朗報!ゲッティイメージズが提供する高品質画像が非商用で埋込み可能に

    写真・動画の著作権使用権利などのサービスを行っているGetty Images(ゲッティイメージズ)。 3月6日に非商用目的に限り、写真の埋め込みツール…

記事を読む

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

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

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

記事を読む

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

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

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

記事を読む

OKINOTE ロリポップ Xサーバー Wordpress

過去記事を一括修正!文字列を置換で画像差し替えも可能なプラグイン

  ハイサイ!ショウ(@OKI_NOTE)です。 ブログを書いていると、たまーに過去に投稿した内容を見返したりするのですが、内容を修正したい記事がけっこうあります。1記事程度の修…

記事を読む

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

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

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

記事を読む

okinote_10k

OKINOTE ロゴ デザインしました。

サイトのイメージをロゴに表現してみました。   『OKINOTE』 このブログのタイトルにもなっているOKINOTE(オキノート)。 僕が沖縄出身であること、ノートみたい…

記事を読む

iPhoneアプリ「するぷろ」

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

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

記事を読む

iplaywalk

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

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

記事を読む

OKINOTE ロリポップ Xサーバー Wordpress

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

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

記事を読む

ad

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

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

沖縄観光先読みカレンダーPRO
海外観光客の動きがわかる?「沖縄観光先読みカレンダーPRO」2017年版

外国人観光客の動向を先読みする目的で千部限定1部500円で販売している…

桑っちーグランプリ&スイーツフェア
浦添特産といえば島桑。地元が集う『第5回桑っちーグランプリ&スイーツフェア』

浦添市で毎年開催している島桑イベント。そもそもなぜ桑なのかというと、浦…

沖縄大百科事典
「ン」で始まる言葉も⁉︎ 沖縄を詳細に記した最初で最後の『沖縄大百科事典』とは?

沖縄タイムス社が創刊35周年を記念し1983年に発行した百科事典。上中…

那覇大綱挽
世界最大級の全長200㍍! 第46回『那覇大綱挽まつり』2016の熱気を感じてきた!

今年で46回目となる「那覇大綱挽(ひき)まつり」。全長200メートル、…

meetuplogo2_resize
沖縄ブロガーミートアップvol.2開催します!

10月16日に沖縄ブロガーミートアップvol.2を開催することになりま…

オーシャンドリーム号
ピースボートの世界一周客船「オーシャンドリーム号」の船内見学に行ってきた

オーシャンドリーム号といえば「ピースボート」の船舶旅行に使用される船で…

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