カテゴリー
Develop 未分類

movabletypeにSyntaxHighlighterを追加

上に記述されたソースコードを整形、強調表示してくれるJSライブラリSyntaxHighlighterを、MT5にインストール。
MT3の時から利用していたが、しばらくみないうちに連携によるコピペの機能などが割愛され、完全JS駆動になっておりました。(展開などが理由でしょうけど)
で、MT4のプラグイン化されたものがあり、これを使うと記事画面のフォーマットから制御できるらしい。
SyntaxHighlighter for Movable Type | kwLog
便利そうではあるが、コード部分の定労力が最新版のと大差ない感じだったので、本家の最新版をインストール。
インストールは特に悩むことも無く、JSとを一式アップロード。
利用する言語のブラシJSだけを読み込み処理して、Styleも適当に。
これでわり。
ただなぜか縦スクロールが表示されて不格好な感じになっていたので、CSSを以下のように調整。
これで縦スクロールはでなくなった。(どっかの外人がoverflow-y: hidden !important;だ!とかいていたけど・・)

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

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

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

コメントを残す

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