Middleman 4 の新機能を試す シリーズMiddleman 4 で middleman-syntax を使った Syntax Highlight（小ネタ）

はじめに

Middleman 4 で Middleman 3 の時に使っていた gem が使えるのか試していきたいと思います。今回試すのは middleman-blog と併用している middleman-syntax です。基本的な使い方は Middleman 3 で middleman-syntax と代わっていません。

middleman-syntax のバージョン 2.x と 3.0 の違い

Middleman 3 時代に使っていた middleman-syntax はバージョン 2.1 でしたが、今回インストールしたのは 3.0 です。3.0 では Markdown で行番号の有り・無しを指定できるようになりました。残念ながら開始行番号の指定等はできません。今後できるようになると良いですね。

``` ruby?line_numbers=false

結果

無事に Middleman 4 で middleman-syntax (v3) を使うことができました。懸念していた External Pipeline への影響ですが、ERB から CSS を作成するので影響はありません。

シリーズ

1. Middleman 4 をインストールしてみる
2. Middleman 4 で middleman-blog をインストールしてみる
3. Browserify を試してみる
4. Gulp から Browserify を実行する
5. Watchify を使った Browserify の 変更監視と自動バンドル
6. Gulp から Watchify と Browserify を使う
7. Middleman 4 の External Pipeline（外部パイプライン）を試す
8. Middleman 4 の External Pipeline を活用した Sass のプリコンパイルと Browserify のバンドル
9. Middleman 4 で middleman-syntax を使った Syntax Highlight（小ネタ）
10. gulp-sass で Font Awesome を導入する方法（Bourbon, Neat 対応）
11. Middleman 4 の External Pipeline に対応した Skeleten（テンプレート）「middleman-tail」 を作った
12. Wercker の step-s3sync で起こった 「Parameter problem: Invalid source/destination」エラーの直し方（小ネタ）