記事の見た目をいじる

marked のエクステンション codeRenderer を作る †

コンポーネントからはこのように使える。

src/lib/components/ArticleElement.svelte

LANG: html
  <style context="module">
+   import { codeRenderer } from './codeRenderer';
+   import { decolatorsInfo } from './codeDecolators/codeDecolatorInfo';
+
+   // 各デコレータが追加する css をまとめる
+   const codeRendererCss = decolatorsInfo.map(info=>info.css).join("\n");

    ...

    // シンタックスハイライト
+   marked.use(codeRenderer);
    ...
   
  </script>

+ <svelte:head>
+   {@html '<style>' + codeRendererCss + '</style>'}
+ </svelte:head>

decolatorsInfo には孫ライブラリが必要な css を個別に追加するので、 それを繋げてヘッダーに入れている。

LANG: html
<style>{@html codeRendererCss}</style>

としたのでは動かなかった。<style> タグ自体を文字列として生成したらうまくいった。

codeRenderer は marked からコードブロックごとに呼び出されることになる。

デコレータ的なアルゴリズムで

• rowsDecorator rows(50) などとして表示行数を変更できる
• numDecorator 行番号付与
• diffDecorator diff 的な +/- 行に色を付ける
• splitterDecorator 行ごとに処理できるよう改行単位でタグを閉じる
• highlightDecorator シンタックスハイライト

などを各 Decorator に分業させてコードブロックを処理する。

src/lib/components/codeRenderer.ts

LANG: ts
import { rowsDecorator } from './codeDecolators/rowsDecorator';
import { numDecorator } from './codeDecolators/numDecorator';
import { diffDecorator } from './codeDecolators/diffDecorator';
import { splitterDecorator } from './codeDecolators/splitterDecorator';
import { highlightDecorator } from './codeDecolators/highlightDecorator';
  
// HTML の特殊文字をエスケープ
// https://stackoverflow.com/questions/1787322/what-is-the-htmlspecialchars-equivalent-in-javascript
export function escapeHtml(text: string) {
  const map = { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#039;' };
  return text.replace(/[&<>"']/g, (c) => map[c as keyof typeof map]);
}

function unescapeHtml(text: string) {
  const map = { '&amp;':'&', '&lt;':'<', '&gt;':'>', '&quot;':'"', '&#039;':"'" };
  return text.replace(/&(?:amp|lt|gt|quot|#039);/g, (code) => map[code as keyof typeof map]);
}

//====================
// CodeBlockDecolator

export declare type CodeBlock = {
  code: string,
  info: string[], 
  params: string[], 
  tags: string[],
  codeClasses: string[],
  maxRows?: number,
  rawHtml?: string,   // ここに代入されればそのままそれを出力する
};

// デコレータ鎖は先頭から実行される
export declare type Decolator = (chain: Decolator[], block: CodeBlock) => CodeBlock;

const decolators: Decolator[] = [
  rowsDecorator,
  numDecorator,
  diffDecorator,
  splitterDecorator,  // 行ごとに分けられるようにするため改行の前後でタグを閉じる・開く
  highlightDecorator, // highlight.js を呼び出す
];

export function callDecolatorChain(chain: Decolator[], block: CodeBlock) {
  const first = chain[0];
  return first ? first(chain.slice(1), block) : block;
}

//====================
// code ブロックをレンダリングする

export const codeRenderer = {renderer:{
  code: (code: string, infoString = '', escaped: boolean) => {

    if(escaped) {
      code = unescapeHtml(code);
    }

    // infoString は info param0 param1 param2
    // info は some:some:some
    const params = infoString.split(' ');
    const info = params.length ? params.shift()!.split(':') : [];
    const block = callDecolatorChain(decolators, {code, info, params, tags: [], codeClasses: []});

    return block.rawHtml ? block.rawHtml
        : `<pre class="marked-code">`
        +  (block.tags.length ? `<span class="tags">${block.tags.join(' ')}</span>` : '')
        + `<code class="${block.codeClasses.join(' ')}" style="max-height:${block.maxRows || 30}lh">${block.code}</code>`
        + `</pre>`;
  }
}};

CodeBlock に新しいオプションを追加したり、
Decorator を増やしたりすることで、
ブロックの内容を画像にして表示するなど、ブロック要素プラグインのような機能をどんどん追加できるはず。

ここでは個別のコードは載せないが、かなりいろいろ表示できるようになった。

LANG: console
$ git add . && git commit -m "コードブロックの表示を改善した"
       modified:   .gitignore
       modified:   package.json
       modified:   pnpm-lock.yaml
       new file:   src/lib/components/ArticleElement.svelte
       new file:   src/lib/components/codeDecolators/codeDecolatorInfo.ts 
       new file:   src/lib/components/codeDecolators/diffDecorator.ts     
       new file:   src/lib/components/codeDecolators/highlightDecorator.ts
       new file:   src/lib/components/codeDecolators/numDecorator.ts      
       new file:   src/lib/components/codeDecolators/rowsDecorator.ts     
       new file:   src/lib/components/codeDecolators/splitterDecorator.ts 
       new file:   src/lib/components/codeRenderer.ts
       new file:   src/node_modules/@types/highlightjs-svelte.d.ts
       modified:   src/routes/articles/[...titleOrId]/+page.svelte

この時のコミットに対して後に不具合修正を入れた

コードブロック表示の不具合修正 e57b415177da49da10b41cf8b4e5f1d935faea89