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

• CJK Unified Ideographs
• CJK Ideographs in Unicode
• Halfwidth and Fullwidth Forms
• HTMLElement lang property
• word-break CSS property

License

MIT