ブログに docpad + markdown を使用しています。コード例をフォーマットするには、 highlight.js プラグインを使用します。書式設定は正常に機能し、キーワードが強調表示されます。ここで、前のブロックと比較して行った変更を示すなど、追加の書式設定を使用してコード ブロックの一部を強調したいと思います。
コードブロックの一部を強調表示することは可能ですか?
Martin Fowler のブログでは次のように表示されます。
唯一の違いは、キーワードも強調表示したいということです。
Docpad のプラグインのリストによると、いくつかのオプションがあります。以下にリストされている2つに簡単に目を通して気づきました。私が見逃した他にもあるかもしれません。
出力の見た目をカスタマイズしたい場合は、いずれかのプラグインが使用する CSS を編集する必要があると思います。選択した特定のプラグインのドキュメントを参照してください。
たとえば、Highligh.js プラグインのドキュメントには、スタイルシートを個別にダウンロードする必要があると記載されています (これにより、OP がそのプラグインを使用してスタイリングを取得しない理由が説明されます)。提供されたリストとデモを確認し、目的の外観に最適なスタイルを選択してください。
CSS ファイルをダウンロードし、適切なディレクトリに保存します。Docpad のドキュメントが示すsrc/render/styles/filename.cssように、「filename.css」をファイルの名前に置き換えるのは確実です。ドキュメントの状態として：
次に、それをページに含めるために、default.html.eco レイアウトのスタイル ブロックを次のように更新します。
<%- @getBlock("styles").add(["/styles/style.css"]).toHTML() %>
繰り返しますが、必ずファイルの実際の名前を使用してください。
使用する色やスタイルを調整するには、その CSS ファイルを編集する必要があります。Highlight.js は、スタイリング フックに使用できるクラス名のリストを提供することに注意してください。調整したい項目と一致する特定のクラス名を見つけ、そのクラスが CSS ファイル内でスタイル設定されている場所を見つけて、満足するまで編集します。
上記は、DocPad ドキュメントの「はじめに」ページで説明されているように、デフォルトのセットアップとプラグインを使用していることを前提としています。YMMV。
変更を強調したい場合は、変更の差分を作成し、言語として「差分」を定義する必要があります。次に、Highlight.js はdiffハイライターを使用して変更を強調表示します。残念ながら、言語と差分の両方を同時に強調表示する方法はありません。つまり、両方ではなく、キーワードを強調表示するか、変更を強調表示することができます。
もちろん、いつでも独自の「言語」を定義して、それを Highlight.jsに登録することができます。しかし、それはこのフォーラムの範囲を超えています。