記事の見た目をいじる の履歴(No.3)

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

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

src/lib/components/ArticleElement.svelte

LANG: html
  <style context="module">
+   import { codeRenderer } from './codeRenderer';
+   import { css } from './codeRendererCss';
+
+   // 追加の CSS
+   const codeRendererCss = css.join("\n");
    ...

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

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

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

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

としたのでは動かないので、<style> タグ自体を文字列として生成する必要がある。

codeRenderer は marked からコードブロックごとに呼び出され、 デコレータ的なアルゴリズムで

• numDecorator 行番号付与
• diffDecorator diff 的な +/- 行に色を付ける
• highlightDecorator シンタックスハイライト

などを個別に処理する。

src/lib/components/codeRenderer.ts

LANG: ts
import { numDecorator } from './codeDecolators/numDecorator';
import { diffDecorator } from './codeDecolators/diffDecorator';
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[],
  removeBreak?: boolean,
};

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

const decolators: Decolator[] = [
  numDecorator,
  diffDecorator,
  highlightDecorator,
];

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 `<pre class="marked-code">`
         +  (block.tags.length ? `<span class="tags">${block.tags.join(' ')}</span>` : '')
         + `<code class="${block.codeClasses.join(' ')}">${block.code}</code>`
         + `</pre>`;
  }
}};

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

diffDecorator†

src/lib/components/codeDecolators/diffDecorator.ts

LANG: ts
import { type Decolator, type CodeBlock, callDecolatorChain, escapeHtml } from '../codeRenderer';
import { css } from '../codeRendererCss';

export function diffDecorator(chain: Decolator[], block: CodeBlock) {
  if (!block.info.includes('diff')) {
    return callDecolatorChain(chain, block);
  }

  // remove "diff"
  const i = block.info.indexOf('diff');
  block.info.splice(i, 1);

  // 先頭文字を marks に切り出す
  const lines = block.code.split(/\r\n?|\n/);
  const marks = lines.map(line => line.substring(0, 1));
  block.code = lines.map(line => line.substring(1)).join("\n");

  // 後続のデコレータがあれば呼び出す
  block = callDecolatorChain(chain, block);

  // マークを付ける
  block.codeClasses.push('diff-lines');
  block.code = block.code
    .split("\n")
    .map((line, i) => `<span class="diff-line" data-mark="${escapeHtml(marks[i])}">${line}</span>`)
    .join("\n");

  return block;
}

css.push(`
.article code.line-numbered {
  display: grid;
  grid-template-columns: auto;
  grid-template-rows: repeat(1fr);
}
.article span.diff-line::before {
  content: attr(data-mark);
  position: absolute;
  margin-left: -2em;
  text-weight: bold;
}
.article span.diff-line {
  padding-left: 3em;
  margin-left: -1em;
  margin-right: -1em;
  display: block;
  min-height: 1lh;
}
.article span.diff-line:not([data-mark=" "])::before {
  color: #ff0;
}
.article span.diff-line[data-mark="+"]::before {
  color: #0f0;
}
.article span.diff-line[data-mark="-"]::before {
  color: #f00;
}
.article span.diff-line:not([data-mark=" "]) {
  background-color: rgba(100,100,0,0.2);
}
.article span.diff-line[data-mark="+"] {
  background-color: rgba(0,100,0,0.2);
}
.article span.diff-line[data-mark="-"] {
  background-color: rgba(100,0,0,0.2);
}
`);

• info から "diff" の要素を取り除く
• 各行の先頭の１文字をマーカーとして取り除く
• 後続のデコレータを適用（ここでハイライト処理される）
• 行単位で <span> で囲み、マーカーがあれば data-mark 属性に入れる
• すべて繋げて返す
• 各行は親に display:grid を指定することで横いっぱいに広がる
• 引数で与えられた行番号をハイライト表示可能