https://github.com/xsynaptic/rehype-wrap-cjk
Rehype plugin for wrapping CJK character sequences
https://github.com/xsynaptic/rehype-wrap-cjk
Last synced: 9 months ago
JSON representation
Rehype plugin for wrapping CJK character sequences
- Host: GitHub
- URL: https://github.com/xsynaptic/rehype-wrap-cjk
- Owner: xsynaptic
- Created: 2023-12-20T15:24:01.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2025-09-08T13:25:55.000Z (9 months ago)
- Last Synced: 2025-09-08T15:26:43.159Z (9 months ago)
- Language: TypeScript
- Size: 456 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# rehype-wrap-cjk
This package is a [unified][]/[rehype][] plugin to wrap [CJK character][cjk-wiki] 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
```sh
npm install rehype-wrap-cjk
```
## Use
A typical pipeline transforming Markdown into HTML with [remark][] and [rehype][]:
```ts
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:
```text
Sample text with CJK characters (中日韓字符) interspersed. 中文 can appear anywhere in the text and will be appropriately wrapped.
```
Example HTML output:
```html
Sample text with CJK characters (中日韓字符) interspersed. 中文 can appear anywhere in the text and will be appropriately wrapped.
```
Example CSS rules (for you to implement in your own projects):
```css
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-unified-ideographs]
- [CJK Ideographs in Unicode][cjk-ideographs-in-unicode]
- [Halfwidth and Fullwidth Forms][halfwidth-and-fullwidth-forms]
- [HTMLElement lang property][html-element-lang-property]
- [word-break CSS property][wordbreak-css-property]
## License
[MIT][mit-license]
[cjk-wiki]: https://en.wikipedia.org/wiki/CJK_characters
[cjk-unified-ideographs]: https://en.wikipedia.org/wiki/CJK_Unified_Ideographs
[cjk-ideographs-in-unicode]: https://en.wikipedia.org/wiki/Template:CJK_ideographs_in_Unicode
[halfwidth-and-fullwidth-forms]: https://en.wikipedia.org/wiki/Halfwidth_and_Fullwidth_Forms_(Unicode_block)
[html-element-lang-property]: https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/lang
[mit-license]: https://opensource.org/licenses/MIT
[rehype]: https://github.com/rehypejs/rehype
[remark]: https://github.com/remarkjs/remark
[unified]: https://github.com/unifiedjs/unified
[wordbreak-css-property]: https://developer.mozilla.org/en-US/docs/Web/CSS/word-break