« 投稿済み記事内のyoutube動画をスマホ幅に合わせて表示 | Home | 子どもたちの視界とよしなにな境界 »

Nov 222013

movabletypeにSyntaxHighlighterを追加

HTML上に記述されたソースコードを整形、強調表示してくれるJSライブラリSyntaxHighlighterを、MT5にインストール。
MT3の時から利用していたが、しばらくみないうちにFlash連携によるコピペの機能などが割愛され、完全JS駆動になっておりました。(スマホ展開などが理由でしょうけど)

で、MT4のプラグイン化されたものがあり、これを使うと記事作成画面のフォーマットから制御できるらしい。
SyntaxHighlighter for Movable Type | kwLog

便利そうではあるが、コード部分の指定労力が最新版SyntaxHighlighterのと大差ない感じだったので、本家の最新版をインストール。

インストールは特に悩むことも無く、JSとCSSを一式アップロード。
利用する言語のブラシJSだけを読み込み処理して、Styleも適当に。
これで終わり。

ただなぜか縦スクロールが表示されて不格好な感じになっていたので、CSSを以下のように調整。
これで縦スクロールはでなくなった。(どっかの外人がoverflow-y: hidden !important;だ!とか書いていたけど・・)

/* syntaxhighlighter */
.syntaxhighlighter {
	margin: -1rem 0 1rem 0 !important;
	font-size: 1.4rem !important;
	padding: 1rem 0;
}

1 Comment

過去に投稿したSyntaxHighlighter部分の記述が変わっているのを、どう補正するか迷い中・・・
regex_replaceでやろうかなと思ったけれど、改行が入っていたり、入ってなかったりという部分で色々ややこしい分岐処理が必要になりそうで悩む・・・

Leave a comment

Search and Archives