class.exe

BudouX¹をつかって文章中に<wbr>を挿入してみました。このブログの記事はMarkdownで書いていて、remark-rehype²で変換しているので拡張するためのhandlerを用意します。

このhandlerはBudouXをつかってParagraphのtextノードに<wbr>を挿入します。

import {all} from 'mdast-util-to-hast'
import {u} from 'unist-builder'
import {loadDefaultJapaneseParser} from 'budoux'

const parser = loadDefaultJapaneseParser()

export function rehypeBudouxHandler(h, node) {
  const children = []
  all(h, node).forEach(child => {
    if (child.type == 'text') {
      parser.parse(child.value).forEach(text => {
        children.push([h.augment(node, u('text', text)))
        children.push(h(node, 'wbr'))
      })
    }
    else {
      children.push(child)
    }
  })
  return h(node, 'p', children)
}

このhandlerをremark-rehypeのオプションに指定します。

const processor = unified()
  .use(remarkParse)
  .use(remarkRehype, {
    handlers: { paragraph: rehypeBudouxHandler }
  })
  ...

たとえばこの文は下記のように変換されました。³

root[1] (1:1-1:23, 0-22)
└─0 element<p>[10] (1:1-1:23, 0-22)
    │ properties: {}
    ├─0 text "たとえば" (1:1-1:23, 0-22)
    ├─1 element<wbr>[0] (1:1-1:23, 0-22)
    │     properties: {}
    ├─2 text "この" (1:1-1:23, 0-22)
    ├─3 element<wbr>[0] (1:1-1:23, 0-22)
    │     properties: {}
    ├─4 text "文は" (1:1-1:23, 0-22)
    ├─5 element<wbr>[0] (1:1-1:23, 0-22)
    │     properties: {}
    ├─6 text "下記のように" (1:1-1:23, 0-22)
    ├─7 element<wbr>[0] (1:1-1:23, 0-22)
    │     properties: {}
    ├─8 text "変換されました。" (1:1-1:23, 0-22)
    └─9 element<wbr>[0] (1:1-1:23, 0-22)
          properties: {}

以上です。こちらの記事がhandlerを作るための参考になりました。

Remark で広げる Markdown の世界

mdast-uttil-to-hastパッケージにある各handlerの例も参考になりました。

mdast-util-to-hast/lib/handlers at main · syntax-tree/mdast-util-to-hast

Footnotes

1. https://github.com/google/budoux ↩

2. https://github.com/remarkjs/remark-rehype ↩

3. 変換後のHastを表示するためにunist-util-inspectというパッケージを使っています。 ↩