プラグイン不要でソースコードを綺麗でシンプルに表示する方法

プラグイン不要でソースコードを綺麗でシンプルに表示する方法

前回は「【WPプラグイン】ソースコード埋め込みテーブルの表示方法」についておすすめプラグインをご紹介したのですが、今回はライブラリタイプのプラグイン不要でブログの記事内に綺麗なソースコードを表示する方法をご紹介します。

 

ライブラリタイプのプラグインは設定に少し手間が要りますが、僕のようなHTMLが分からない初心者でも簡単に設置できますよ♪

 

以下を参考に導入してみてください^^

<AD link>

プラグイン不要でソースコードを表示する2つの方法

  1. hilight.js
  2. Gist

highlight.js

プラグインのタイプよりもサイトの負荷が少なくて表示速度も速いことでおすすめのプラグインがhighlight.jsです。

こちらはライブラリタイプとなっているため、設定に少し手間がかかるようですが基本はコピペで設定できます。

shufulifeのちゅうんこさんが解説されています↓

 

Gist

プラグインを使わない方法を紹介しているのが以下のデザイナーさんのサイト。

ちょうど僕が前回ピックアップしたプラグインの比較も分かりやすく紹介されています^^

プラグインを使いたくないというアナタは是非参考にしてみてください。

色々な目から鱗のカスタマイズ情報がてんこ盛りですよ♪

 

 

「hilight.js」を使用してソースコードをブログに埋め込みたい!

で、上記のサイト+αを参考に色々調べた結果、僕はhilight.jsでソースコードを埋め込み表示することに決定しました!

何やらhilight.jsは前回紹介した主要プラグインとの互換性もあるようなので、いざ気に入らなかったり別なものを試したいという時にすぐに変更できる点にメリットを感じました。

と、いうことで試してみました!以下が導入手順と設定方法です。

 

hilight.jsをサイトヘッダーに設置するだけで完了!?

まずはじめにhilight.jsで配布されている以下のソースコードをサイトのhead部分に埋め込みます。

 

今回、僕は分りやすいように</head>の直前に貼り付けを行いました^^

head部分というのはサイトのヘッダー部分にあたる<head>〜</head>の間です。

<head>〜</head>の次は<body>〜</body>となっているので間違わないようにコピペしてください。

 

ソースコードをhead内に貼り付けるだけで、以下の画像のように表示されていたソースコードが、

 

hl0

以下のようにハイライトされました!簡単!

hl1

 

実は必要な作業はhead内への埋め込み作業だけなのです。

本当にそれだけでした。笑

 

実際に設置してみると手順も表示されるテーブルもシンプルで綺麗で僕は満足しています^^

最終的にはこんな感じに整形できました!

 

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.2.0/styles/default.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.2.0/highlight.min.js"></script>
<script>// <![CDATA[
$(document).ready(function() { $('pre').each(function(i, block) { hljs.highlightBlock(block); }); });
// ]]></script>

 

折り返しされていた文字列も横スクロールに変換できて、非常にシンプル!

十分すぎる。余は満足じゃ^^

 

貼り付けコードについて

僕が埋め込みを行った今日現在では「highlight.js/9.2.0」となっており、定期的にバージョンアップを行っているようなので最新版のCDNコードは公式サイトで確認するようにしてください。

 

 

そこで「cdnjs」のコードをコピーしてheadタグ内に貼り付けるだけです♪

 

<link rel=”stylesheet” href=”//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.2.0/styles/default.min.css”>

<script src=”//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.2.0/highlight.min.js”></script>

<script>// <![CDATA[ $(document).ready(function() { $(‘pre’).each(function(i, block) { hljs.highlightBlock(block); }); }); // ]]></script>

ピンクはバージョン、オレンジはちゅんこさんのサイトを参考

 

実際に貼り付けると、前述したように以下のように整形されて表示されます^^

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.2.0/styles/default.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.2.0/highlight.min.js"></script>
<script>// <![CDATA[
$(document).ready(function() { $('pre').each(function(i, block) { hljs.highlightBlock(block); }); });
// ]]></script>

(↑のコードをそのままお使いください。)

 

「highlight.js」プラグイン&表示整形の方法

文章が長くなってきたので、今回は導入編として<head>内への挿入方法と実際の表示スタイルについての解説までとしておきます。

実は導入したり色々試している中で「htghlight.js」の公式プラグインなどもあって初心者でも簡単にカスタマイズできることがわかりました。

そちらの詳しい内容は「highlight.jsプラグイン導入方法と表示整形」で解説しています^^

 

まとめ

highlight.jsは設置方法もカンタンで僕のような初心者でも問題なく導入できました。

シンプルといっても綺麗だし、表示のテーマ種類も豊富にあるので気に入りました♪

highligterなどを使っていてサイトが重いなーと感じている方は是非!

 

LEAVE A REPLY

*
*
* (公開されません)