カテゴリー
Develop 未分類

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;
}

「movabletypeにSyntaxHighlighterを追加」への1件の返信

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

コメントを残す

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