コード表示をhighlight.jsに乗り換えた
何のタイミングだったのかさっぱりですが、入れていたはずのWordPressプラグインSyntaxHighlighter Evolvedが何故かきれいに消えてまして。
はて？これはどうしたことか。
入れ直そうかと思ったけど、表示の一部にswfがあるのがちょっとネックなんだよね。
今年はレスポンシブのお仕事をした事もあり、後々サイトのレスポンシブ化をするならswfファイルをなるべく使いたくな～、と。
で、あれこれググって見た結果、
WordPressのプラグインは止めて、highlight.jsを導入する事にしました。
決め手としては
- プラグインじゃないのでアップデートも怖くない
- コピーとか印刷とか、無くてもいい気がしてきた
- 言語を自動判別してくれる
- ファイルが軽い
こんな感じ。
ダウンロードや導入についてはこちらのサイトを参考にさせて頂きました。
CSSも種類が豊富で、これを選ぶのに一番時間がかかったようなｗ
ひとまずmonokai_sublimeで様子を見ようかと思います。
尚、CSSごとのデモは配布サイトで公開されますよ～
HTMLだとこんな感じ
<img width="220" height="165" src="https://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！
このサイトでもあれこれ試行錯誤してコード書いた部分とかあるんで、忘れないうちに記事にしないとー
現場のプロが教えるWeb制作の最新常識 知らないと困るWebデザインの新ルール
posted with ヨメレバ
井村 圭介,久保 知己,酒井 優,前川 昌幸 エムディエヌコーポレーション 2014-01-27
