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 only.
npm install rehype-wrap-cjkA 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:
html:not([lang^='zh']) span[lang^='zh'] {
font-style: normal !important;
text-decoration: none !important;
word-break: keep-all !important;
}