micromark-extension-gfm-strikethrough/dev/lib/syntax.js at main · micromark/micromark-extension-gfm-strikethrough
micromark extension to support GFM strikethrough. Contribute to micromark/micromark-extension-gfm-strikethrough development by creating an account on GitHub.
micromark-extension-gfm-strikethrough/dev/lib/syntax.js at main · micromark/micromark-extension-gfm-strikethrough favicon https://github.com/micromark/micromark-extension-gfm-strikethrough/blob/main/dev/lib/syntax.js
micromark-extension-gfm-strikethrough/dev/lib/syntax.js at main · micromark/micromark-extension-gfm-strikethrough
starlight/packages/starlight/integrations/asides.ts at main · withastro/starlight
🌟 Build beautiful, accessible, high-performance documentation websites with Astro - withastro/starlight
starlight/packages/starlight/integrations/asides.ts at main · withastro/starlight favicon https://github.com/withastro/starlight/blob/main/packages/starlight/integrations/asides.ts
starlight/packages/starlight/integrations/asides.ts at main · withastro/starlight

うちにも入れたい

astro で動くプラグインを探している。 astro 製の starlight にあるのだから、 部品として公開してくれれば良いのだが見つからなかった。

astro の実装を探してみた。remark-directive ベース。後で読む。

https://github.com/withastro/starlight/blob/main/packages/starlight/integrations/asides.ts

ということで https://github.com/elviswolcott/remark-admonitions 。 どうも remark の API 変更で動かなくなってしまったぽい。

website/astro.config.mjs at main · nf-core/website
Code and files for the main nf-core website. Contribute to nf-core/website development by creating an account on GitHub.
website/astro.config.mjs at main · nf-core/website favicon https://github.com/nf-core/website/blob/main/astro.config.mjs
website/astro.config.mjs at main · nf-core/website

では動いているぽい。astro-3.6。うちは astro-4.1

remark/doc/plugins.md at main · remarkjs/remark
markdown processor powered by plugins part of the @unifiedjs collective - remarkjs/remark
remark/doc/plugins.md at main · remarkjs/remark favicon https://github.com/remarkjs/remark/blob/main/doc/plugins.md#list-of-plugins
remark/doc/plugins.md at main · remarkjs/remark

を見ると、

some plugins don’t work with recent versions of remark due to changes in its underlying parser (micromark). 👉 note: remark-directive is similar and up to date)

と書いてある。 でも、ちょっとシンタックスが違って remark-admonitions の方が好みなんよね。

2つ手段がある。

remark-admonitions を近代化するか、remark-directive を改造するか。

remark-admonitions の近代化をやってみる

情報収集…

remark-parse v9.0 support · Issue #45 · vivliostyle/vfm
#44 対応のために remark-parse を v8.0.2 から v9.0.0 へ更新したら parser 変更により現状のプラグイン実装の互換が失われた。micromark 対応が必要となる。 Release 13.0.0 (micromark) · remarkjs/remark remark/plugins.md at main · remarkjs/remark 動作しなくなっ...
remark-parse v9.0 support · Issue #45 · vivliostyle/vfm favicon https://github.com/vivliostyle/vfm/issues/45
remark-parse v9.0 support · Issue #45 · vivliostyle/vfm

remark-13 (2020) からぽい?

Release 13.0.0 (micromark) · remarkjs/remark
This is a giant change for remark. It replaces the 5+ year old internals with a new low-level parser: micromark. The old internals have served billions of users well over the years, but markdown ha...
Release 13.0.0 (micromark) · remarkjs/remark favicon https://github.com/remarkjs/remark/releases/tag/13.0.0
Release 13.0.0 (micromark) · remarkjs/remark

vitest で test driven

import { expect, test } from "vitest";
import { fromMarkdown } from "mdast-util-from-markdown";
const SRC = `
import { expect, test } from "vitest";
import { type Extension } from "micromark-util-types";
import { fromMarkdown } from "mdast-util-from-markdown";
const SRC = `
:::info 情報!
ほげほげ
:::
`;
// 空の micromark plugin
const admonition: Extension = {};
test("micromark", () => {
const result = fromMarkdown(SRC, {
extensions: [admonition],
});
console.log(JSON.stringify(result, null, 2));
expect(result.type).toEqual("root");
expect(result.children[0].type).toEqual("heading");
});```
```json
{
"type": "root",
"children": [
{
"type": "paragraph",
"children": [
{
"type": "text",
"value": ":::info 情報!\nほげほげ\n:::",
"position": {
// …
}
}
],
"position": {
// …
}
}
],
"position": {
// …
}
}

micromark Extension

https://github.com/micromark/micromark/blob/main/packages/micromark-util-types/index.d.ts#L763
export interface Extension {
document?: ConstructRecord | undefined
contentInitial?: ConstructRecord | undefined
flowInitial?: ConstructRecord | undefined
flow?: ConstructRecord | undefined
string?: ConstructRecord | undefined
text?: ConstructRecord | undefined
disable?: {null?: Array<string> | undefined} | undefined
insideSpan?:
| {null?: Array<Pick<Construct, 'resolveAll'>> | undefined}
| undefined
attentionMarkers?: {null?: Array<Code> | undefined} | undefined
}

実装例

とりあえずこれを読むべき。

GitHub - micromark/micromark: small, safe, and great commonmark (optionally gfm) compliant markdown parser
small, safe, and great commonmark (optionally gfm) compliant markdown parser - micromark/micromark
GitHub - micromark/micromark: small, safe, and great commonmark (optionally gfm) compliant markdown parser favicon https://github.com/micromark/micromark?tab=readme-ov-file#creating-a-micromark-extension
GitHub - micromark/micromark: small, safe, and great commonmark (optionally gfm) compliant markdown parser

inline と block だと block の方が難しい。 micromark でちょっとインタフェースが変わったのを辻褄合わせるだけ を想定してたのですが、手に負えん。 プランBへ。

remark-directive を改造

RemarkでZenn形式のmarkdownを再現する
RemarkでZenn形式のmarkdownを再現する favicon https://zenn.dev/nazo6/articles/remark-zenn-markdown
RemarkでZenn形式のmarkdownを再現する

むずい