Closed9

markdown-it&prismjs&nextjs

Diff-highlight with markdown-it-prism

  • markdown-it-prism 形式ではDOMをいじる形式のプラグインはすべて使えない
  • Diff-highlightプラグインも
    1. diff としてパースされたものを正規表現でcode段階までもどす
    2. 本来の言語でハイライト
    3. diffに合わせて追加でcssのclassをさしこむ

の形で処理しているのでzenn-cliではそのままつかえない

-> 実は使えるかもしれない...(後述)

逆にいえば、同じ処理をDOM非依存で完結させてしまえばzennのようなprismをnodejsパッケージとして組み込むプログラムでもdiff+languageのハイライトが入れられる

https://github.com/PrismJS/prism/blob/master/plugins/diff-highlight/prism-diff-highlight.js
をベースに

あたりを参考にしつつ処理を実装する。
envがそのままだと使えないのでかなり面倒だが理論的には出来そう

-> PrismのHookのcallbackの形式がたまたま通ったので使えちゃった......(後述)

拡張機能で渡される env のタイプ(実際はこの中の部分集合)

export interface Environment extends Record<string, any> {
    selector?: string;
    element?: Element;
    language?: string;
    grammar?: Grammar;
    code?: string;
    highlightedCode?: string;
    type?: string;
    content?: string;
    tag?: string;
    classes?: string[];
    attributes?: Record<string, string>;
    parent?: Array<string | Token>;
}

diff-highlight, どうも生成されたDOMをいじるのはいじるが、Renderされたもの(HTMLElement)をいじるのではなく'string'の段階のものをいじるので使えるはずではないか?と思った

ということで型を上のprismjsのDocから拝借して強制的に型をしばったりごまかしたりして(本当は絶対によくないが型定義ファイルをいじりたくなかった)

Done.->

https://github.com/zenn-dev/zenn-editor/pull/104

ちなみに、見れば見る程「markdown-it-prismが仮にdiff-highlightを読み込めるならそのまま使えるんじゃね?」という気持ちになった。
ただ普通にzenn-editormdPrismにloadPrismPluginを復元しても手元では動かなかったのでまた別の問題がありそう,とりあえず目的は達成できたのでclose.

このスクラップは2021/01/20にクローズされました
ログインするとコメントできます