rehype-wrap-cjk

This package is a unified/rehype plugin to wrap CJK character sequences in an element (defaulting to span) with a lang attribute, useful for applying different CSS styling rules in multilingual contexts.

Note: this plugin is distributed in ESM and CJS.

Install

npm install rehype-wrap-cjk

Use

A typical pipeline transforming Markdown into HTML with remark and rehype:

import rehypeSanitize from 'rehype-sanitize';
import rehypeStringify from 'rehype-stringify';
import rehypeCjkWrap from 'rehype-wrap-cjk';
import remarkParse from 'remark-parse';
import remarkRehype from 'remark-rehype';
import { unified } from 'unified';

export function processMarkdown(markdownContent: string): string {
    const htmlOutput = unified()
        .use(remarkParse)
        .use(remarkRehype)
        .use(rehypeCjkWrap)
        .use(rehypeSanitize)
        .use(rehypeStringify)
        .processSync(markdownContent);

    return String(htmlOutput);
}

Example plain text input:

Sample text with CJK characters (中日韓字符) interspersed. 中文 can appear anywhere in the text and will be appropriately wrapped.

Example HTML output:

Sample text with CJK characters (<span lang="zh">中日韓字符</span>) interspersed. <span lang="zh">中文</span> can appear anywhere in the text and will be appropriately wrapped.

Example CSS rules (for you to implement in your own projects):

html:not([lang^='zh']) span[lang^='zh'] {
    font-style: normal !important;
    text-decoration: none !important;
    word-break: keep-all !important;
}

Reference

License

MIT