fix: コードブロックのタイトルをHTMLエスケープし、marked v17 APIの関数シグネチャを修正 (#60)

- renderLivecodeSection の title 引数を escapeHtml() でエスケープ
  タイトルに '<' '>' '&' '"' "'" などが含まれる場合にHTMLタグとして
  解釈されてしまう問題を修正（fixes #59）
- code() の関数シグネチャを marked の実際の API に合わせて修正
  PR #57 では token オブジェクト形式を想定していたが、marked v17 でも
  実際のレンダラー呼び出しは (code, lang, escaped) のまま変わっていない
- タイトルのHTMLエスケープを確認するテストを追加

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

Author: myakura

lib/renderer/md/code.js

@@ -2,10 +2,18 @@ import { marked } from 'marked';
 
 const origCodeRender = marked.Renderer.prototype.code;
 
+const escapeHtml = (str) =>
+  str
+    .replace(/&/g, '&')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+    .replace(/'/g, '&#39;');
+
 const renderLivecodeSection = (title, codeHtml) => `
 <section class="CG2-livecode">
 <header class="CG2-livecode__header">
-<div class="CG2-livecode__label">${title}</div>
+<div class="CG2-livecode__label">${escapeHtml(title)}</div>
 </header>
 <div class="CG2-livecode__body">${codeHtml}</div>
 </section>
@@ -23,29 +31,30 @@ const renderLivecodeSection = (title, codeHtml) => `
  * ```html#たいとる 言語指定とタイトル指定 ```
  * みたいにすると、拡張したやつでレンダリングして返す
  *
- * @param {object} token
- *   marked v17 のコードトークン ({type, raw, lang, text})
+ * @param {string} code
+ *   コード文字列
+ * @param {string} lang
+ *   言語指定文字列（`lang#タイトル` の形式を取る場合もある）
+ * @param {boolean} escaped
  * @return {string}
  *   HTML文字列
  *
  */
-export default function(token) {
-  const { lang } = token;
-
+export default function(code, lang, escaped) {
   // そもそも言語指定ないやつ
   if (!lang) {
-    return origCodeRender.call(this, token);
+    return origCodeRender.call(this, code, lang, escaped);
   }
 
   const langArr = lang.split('#').map((t) => t.trim());
   // 言語の指定はあったが、タイトルがない = 今まで通り
   if (langArr.length === 1 || langArr[1].length === 0) {
-    return origCodeRender.call(this, { ...token, lang: langArr[0] });
+    return origCodeRender.call(this, code, langArr[0], escaped);
   }
 
   // 言語の指定もタイトル指定もちゃんとあるやつ
   return renderLivecodeSection(
     langArr[1], // タイトル
-    origCodeRender.call(this, { ...token, lang: langArr[0] }) // コード本体
+    origCodeRender.call(this, code, langArr[0], escaped) // コード本体
   );
 }

test/cgmd/renderer/md/code.js

@@ -39,5 +39,18 @@ describe('#code', function() {
     assert(html1 === expect);
     assert(html2 === expect);
   });
+  it('タイトルにHTML特殊文字が含まれる場合はエスケープされる', function() {
+    const html = renderer.render('```html#<template>の使い方\nhoge\n```');
+    const expect = '' +
+      '<section class="CG2-livecode">\n' +
+        '<header class="CG2-livecode__header">\n' +
+          '<div class="CG2-livecode__label">&lt;template&gt;の使い方</div>\n' +
+        '</header>\n' +
+        '<div class="CG2-livecode__body">' +
+          '<pre><code class="language-html">hoge\n</code></pre>\n' +
+        '</div>\n' +
+      '</section>\n';
+    assert(html === expect, `expected escaped HTML, got: ${html}`);
+  });
 });
 });