「SyntaxHighlighter」のWordPress版を導入

スポンサーリンク


ソースコードをきれいに表示できる優れもの

今回は、サイトのコードソースをきれいに表示するだけでなく、コピーまでしやすいように整形してくれるツール「SyntaxHighlighter」のWordpress版、「SyntaxHighlighter Evolved」の導入してみました。

SyntaxHighlighterは、さまざまなサイトできれいにコードが表示されているのを見て以前から興味があったのですが、ツール名がわからず「HTML ソースコード きれい 表示」などと検索をかけたところ、このツールにたどりつきました。

WordPress 版はプラグインのダウンロードだけ

しかし、このツール、通常のサイトでは当然ながらツールのインストール後にサイトにアップロードさせたり、head部分にスクリプトやCSSのリンクを書き込んだりするので、「もっと簡単に導入できないものだろうか」と思ってさらに検索をかけたところ、ありました!Wordpress用に開発されたプラグインがあるのです!

プラグインは、以下の2通りから入手してみてください。

[表示させたい言語][/表示させたい言語]で囲むだけ

早速、プラグインを導入後、利用してみました。

コード表示の方法は簡単。コードを[表示させたい言語][/表示させたい言語] で囲むだけ。

肝心の言語は、htmlやcss、javascript、phpなど普及している主要言語はほぼ全て網羅していますのでご安心を。

では、試しにhtmlで囲んだ記事を表示させてみましょう。

これはテストです
SyntaxHighlighter Evolvedを使ってきれいなソースコード表示

きれいに囲んでくれましたね。
これを使えば、今後備忘録として紹介してゆくコードもスムーズに表示できます。

便利な機能がいっぱい

ちょっと待ってください。機能はこれだけではありません。

特定の行を指定してハイライトさせる

これはテストです
SyntaxHighlighter Evolvedでハイライト
SyntaxHighlighter Evolvedでハイライト
これはテストです
SyntaxHighlighter Evolvedでハイライト

上記のコードは、「html」の後に「highlight=”2-3,5″」と打ち込んでいます。2から3行目まで、そして5行目を目立たせるという指令ですね。

スポンサーリンク

開始行を指定する

これはテストです
SyntaxHighlighter Evolvedでハイライト
SyntaxHighlighter Evolvedでハイライト
これはテストです
SyntaxHighlighter Evolvedでハイライト

今度は「html」の後に「firstline=”3″」と打ち込んでいます。開始行を指定することもできるんです。

行番号を非表示にする

これはテストです
SyntaxHighlighter Evolvedでハイライト
SyntaxHighlighter Evolvedでハイライト
これはテストです
SyntaxHighlighter Evolvedでハイライト

今度は、行番号を非表示にしてみました。「html」の後ろに「gutter=”false”」と打ち込んでいます。なんだか普通の表示になったみたいで味気ないですね。

タイトルの表示

これはテストです
SyntaxHighlighter Evolvedでハイライト
SyntaxHighlighter Evolvedでハイライト
これはテストです
SyntaxHighlighter Evolvedでハイライト

開始行の上にタイトルが入りましたね。これがあれば、どんなコードを表示しているのかわかりやすいでしょう。

ソースコードを畳んでおく

これはテストです
SyntaxHighlighter Evolvedでハイライト
SyntaxHighlighter Evolvedでハイライト
これはテストです
SyntaxHighlighter Evolvedでハイライト

時には表示させたいソースコードが長い時もあるでしょう。そこで、初期表示ではコードを折りたたんでおき、クリックで開くようにしてみましょう。
「html」の後ろに「collapse=”true”」を加えましょう。

コードにリンクを貼りたい


ソースコード中にリンクさせたいアドレスがある時は、「html」の後ろに「autolinks=”true”」をつけましょう。

主要な用途はこのくらいでしょう。今後はこのツールをフル活用してサイトの備忘録に関する記事をたくさん書いてゆくつもりです。

スポンサーリンク


コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

ABOUTこの記事をかいた人

新聞社の記者をしています。仲間との起業を夢見て、これまでに学んできたノウハウを記しておきます。現在、主に結婚新聞や企業・団体向けの広報紙を制作していますが「こんな紙面をつくってほしい」とのご要望にも随時お応えしています。