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

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

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

記事を読む

iPhoneアプリ「するぷろ」

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

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

記事を読む

Google AdSense アドセンス お知らせ

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

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

記事を読む

iplaywalk

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

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

記事を読む

ブログ ツール

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

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

記事を読む

2014年人気記事ランキングトップ20.jpg

ブログ開始1年経過。1年間で最も読まれた記事ランキングTOP20!

  ハイサイ!ショウ(@OKI_NOTE)です。 ブログの運営を開始してはや1年が過ぎました。 今回は、この1年間で書いた記事の中で閲覧数が高い記事のTOP20を紹介したいと思…

記事を読む

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

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

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

記事を読む

広告 OKINOTE サムネイル

LINE自作スタンプクリエイター向け。2,000円から広告販売始めました。

    今月で半年を迎えるこのブログ。   おかげさまでアクセス数が順調に伸びており、7万PVを突破しました。   …

記事を読む

okinote_10k

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

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

記事を読む

Mac ソフトツール appstorehelper

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

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

記事を読む

ad

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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