Remark basic ruby plugin

astro.config.ts

@@ -5,6 +5,7 @@ import remarkEmoji from 'remark-emoji';
 import svelte from "@astrojs/svelte";
 import mdx from '@astrojs/mdx';
 import yaml from '@rollup/plugin-yaml';
+import ruby from './src/assets/ruby';
 
 
 // https://astro.build/config
@@ -14,7 +15,8 @@ export default defineConfig({
   markdown: {
     remarkPlugins: [
       [(remarkEmoji as any), {accessible: true}],
-      remarkMath
+      remarkMath,
+      ruby,
     ],
     rehypePlugins: [
       [rehypeKatex, {output: 'mathml'}]

package.json

@@ -22,7 +22,8 @@
     "remark-math": "^5.1.1",
     "reveal.js": "^4.4.0",
     "sass": "^1.61.0",
-    "svelte": "^3.58.0"
+    "svelte": "^3.58.0",
+    "unist-util-visit": "^4.1.2"
   },
   "devDependencies": {
     "@rollup/plugin-yaml": "^4.0.1",

pnpm-lock.yaml

@@ -40,6 +40,9 @@ dependencies:
   svelte:
     specifier: ^3.58.0
     version: 3.58.0
+  unist-util-visit:
+    specifier: ^4.1.2
+    version: 4.1.2
 
 devDependencies:
   '@rollup/plugin-yaml':

src/assets/ruby.ts

@@ -0,0 +1,35 @@
+import { visit } from "unist-util-visit";
+import type { Node } from "unist-util-visit/lib";
+
+
+const regex = /\{.+?\}\(.+?\)/g;
+const group = /^\{(.+?)\}\((.+?)\)$/;
+const template = "<ruby>$1<rp>(</rp><rt>$2</rt><rp>)</rp></ruby>";
+
+function toRuby(ruby: string) {
+  return ({
+    type: "html",
+    value: ruby.replace(group, template),
+  })
+}
+
+function transformRuby(node: { value: string }, index: number, parent: any) {
+  if (!regex.test(node.value)) return;
+
+  const text = node.value.split(regex).map(value => ({ type: "text", value}));
+  const ruby = node.value.match(regex)!.map(toRuby);
+
+  const merged = [];
+  for (let i = 0; i < text.length; i++) {
+    text[i] && merged.push(text[i]);
+    ruby[i] && merged.push(ruby[i]);
+  }
+
+  parent.children.splice(index, 1, ...merged);
+}
+
+export default function ruby() {
+  return (tree: Node, _: any) => {
+    visit(tree, "text", transformRuby);
+  }
+}

src/content/posts/ruby-in-markdown.md

@@ -0,0 +1,104 @@
+---
+title: Ruby extensions for Markdown
+date: 2023-01-15T16:19:00+01:00
+tags: [Japanese, zola, hugo, astro]
+draft: true
+---
+In Markdown there is currently no notation for adding ruby to East Asian scripts, however it is possible to add support for it by using shortcodes in SSGs.
+
+## Examples
+### Japanese
+{日本語}(にほんご)の{文法}(ぶんぽう)は{難}(むずか)しい  
+Remark: `{日本語}(にほんご)の{文法}(ぶんぽう)は{難}(むずか)しい`  
+Tera: `{{/* ruby(expr="日本語,にほんご;の;文法,ぶんぽう;は;難,むずか;しい") */}}`  
+
+### Chinese
+{北}(Běi){京}(jīng)  
+{北}(ㄅㄟˇ){京}(ㄐㄧㄥ)  
+`{{/* ruby(expr="北,Běi;京,jīng") */}}`  
+`{{/* ruby(expr="北,ㄅㄟˇ;京,ㄐㄧㄥ") */}}`
+
+### Korean
+{韓}(한){國}(국)  
+`{{/* ruby(expr="韓,한;國,국") */}}`
+
+### Vietnamese
+{河}(Hà){內}(Nội)  
+`{河}(Hà){內}(Nội)  `
+`{{/* ruby(expr="河,Hà;內,Nội") */}}`
+
+## Zola
+The following is a snippet for the Tera templating engine which is inspired by Jinja2.
+```jinja-html
+<ruby>
+  {%- for item in expr | split(pat=";") -%}
+  {%- set sub_item = item | split(pat=",") -%}
+  {{- sub_item[0] -}}
+  {%- if sub_item[1] -%}
+  <rp>(</rp><rt>{{- sub_item[1] -}}</rt><rp>)</rp>
+  {%- else -%}
+  <rt></rt>
+  {%- endif -%}
+  {%- endfor -%}
+</ruby>
+```
+
+## Hugo
+The following is a snippet for the Golang templating engine used by Hugo.
+```html
+{{- with .Get 0 -}}
+<ruby>
+  {{- /* Generate the ruby markup */ -}}
+  {{- range split . ";" -}}
+    {{- $item := split . "," -}}
+    {{- $ruby := index $item 1 -}}
+    {{- index $item 0 -}}
+    {{- if $ruby -}}
+      <rp>(</rp><rt>{{- $ruby -}}</rt><rp>)</rp>
+    {{- else -}}
+      <rt></rt>
+    {{- end -}}
+  {{- end -}}
+</ruby>
+{{- end -}}
+```
+
+
+## Astro
+```ts
+import { visit } from "unist-util-visit";
+import type { Node } from "unist-util-visit/lib";
+
+
+const regex = /\{.+?\}\(.+?\)/g;
+const group = /^\{(.+?)\}\((.+?)\)$/;
+const template = "<ruby>$1<rp>(</rp><rt>$2</rt><rp>)</rp></ruby>";
+
+function toRuby(ruby: string) {
+  return ({
+    type: "html",
+    value: ruby.replace(group, template),
+  })
+}
+
+function transformRuby(node: { value: string }, index: number, parent: any) {
+  if (!regex.test(node.value)) return;
+
+  const text = node.value.split(regex).map(value => ({ type: "text", value}));
+  const ruby = node.value.match(regex)!.map(toRuby);
+
+  const merged = [];
+  for (let i = 0; i < text.length; i++) {
+    text[i] && merged.push(text[i]);
+    ruby[i] && merged.push(ruby[i]);
+  }
+
+  parent.children.splice(index, 1, ...merged);
+}
+
+export default function ruby() {
+  return (tree: Node, _: any) => {
+    visit(tree, "text", transformRuby);
+  }
+}
+```

src/content/posts/ruby-shortcodes.md

@@ -1,63 +0,0 @@
----
-title: Japanese Ruby shortcodes for Zola & Hugo
-date: 2023-01-15T16:19:00+01:00
-tags: [Japanese, zola, hugo]
-draft: true
----
-
-In Markdown there is currently no notation for adding ruby to East Asian scripts, however it is possible to add support for it by using shortcodes in SSGs.
-
-## Examples
-### Japanese
-{{ ruby(expr="日本語,にほんご;の;文法,ぶんぽう;は;難,むずか;しい") }}  
-`{{/* ruby(expr="日本語,にほんご;の;文法,ぶんぽう;は;難,むずか;しい") */}}`  
-
-### Chinese
-{{ ruby(expr="北,Běi;京,jīng") }}  
-{{ ruby(expr="北,ㄅㄟˇ;京,ㄐㄧㄥ") }}  
-`{{/* ruby(expr="北,Běi;京,jīng") */}}`  
-`{{/* ruby(expr="北,ㄅㄟˇ;京,ㄐㄧㄥ") */}}`
-
-### Korean
-{{ ruby(expr="韓,한;國,국") }}  
-`{{/* ruby(expr="韓,한;國,국") */}}`
-
-### Vietnamese
-{{ ruby(expr="河,Hà;內,Nội") }}  
-`{{/* ruby(expr="河,Hà;內,Nội") */}}`
-
-## Zola
-The following is a snippet for the Tera templating engine which is inspired by Jinja2.
-```jinja-html
-<ruby>
-  {%- for item in expr | split(pat=";") -%}
-  {%- set sub_item = item | split(pat=",") -%}
-  {{- sub_item[0] -}}
-  {%- if sub_item[1] -%}
-  <rp>(</rp><rt>{{- sub_item[1] -}}</rt><rp>)</rp>
-  {%- else -%}
-  <rt></rt>
-  {%- endif -%}
-  {%- endfor -%}
-</ruby>
-```
-
-## Hugo
-The following is a snippet for the Golang templating engine used by Hugo.
-```html
-{{- with .Get 0 -}}
-<ruby>
-  {{- /* Generate the ruby markup */ -}}
-  {{- range split . ";" -}}
-    {{- $item := split . "," -}}
-    {{- $ruby := index $item 1 -}}
-    {{- index $item 0 -}}
-    {{- if $ruby -}}
-      <rp>(</rp><rt>{{- $ruby -}}</rt><rp>)</rp>
-    {{- else -}}
-      <rt></rt>
-    {{- end -}}
-  {{- end -}}
-</ruby>
-{{- end -}}
-```