コード表示をhighlight.jsに乗り換えた

2015年07月18日 │ Web関連, WordPress │ コメント(0)

コード表示をhighlight.jsに乗り換えた

何のタイミングだったのかさっぱりですが、入れていたはずのWordPressプラグインSyntaxHighlighter Evolvedが何故かきれいに消えてまして。
はて?これはどうしたことか。

入れ直そうかと思ったけど、表示の一部にswfがあるのがちょっとネックなんだよね。
今年はレスポンシブのお仕事をした事もあり、後々サイトのレスポンシブ化をするならswfファイルをなるべく使いたくな~、と。

で、あれこれググって見た結果、
WordPressのプラグインは止めて、highlight.jsを導入する事にしました。
決め手としては

  • プラグインじゃないのでアップデートも怖くない
  • コピーとか印刷とか、無くてもいい気がしてきた
  • 言語を自動判別してくれる
  • ファイルが軽い

こんな感じ。

ダウンロードや導入についてはこちらのサイトを参考にさせて頂きました。

CSSも種類が豊富で、これを選ぶのに一番時間がかかったようなw
ひとまずmonokai_sublimeで様子を見ようかと思います。
尚、CSSごとのデモは配布サイトで公開されますよ~

HTMLだとこんな感じ


<img width="220" height="165" src="http://www.izayoido.com/wp-content/uploads/2015/07/20150718_ec.jpg" class="attachment-post-thumbnail wp-post-image" />
<h3>コード表示をhighlight.jsに乗り換えた</h3>
<p>乗り換えどれにしようかな~、って思ったんだけど<br />
highlight.jsが軽くてラクでひゃっほう!</p>

CSSはこんな


div#mainarea p#group {
	margin-top:40px;
	margin-left:10px;
	color:#893423;
	font-weight:bold;
	font-size:16.2px;
	line-height:132%;
}

うん、これでOK!
このサイトでもあれこれ試行錯誤してコード書いた部分とかあるんで、忘れないうちに記事にしないとー

« »

comment

© 2005- izayoido All Rights Reserved.