Skip to content

Commit 4b608ce

Browse files
committed
doc: add example in document. (#151)
1 parent 8154d1b commit 4b608ce

File tree

1 file changed

+50
-0
lines changed

1 file changed

+50
-0
lines changed

README.md

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -56,6 +56,56 @@ function App() {
5656
}
5757
```
5858

59+
## Highlight line or character
60+
61+
[![Open in CodeSandbox](https://codesandbox.io/embed/https-github-com-uiwjs-react-textarea-code-editor-issues-151-nsm7qp?fontsize=14&hidenavigation=1&theme=dark)
62+
63+
```jsx
64+
import CodeEditor from '@uiw/react-textarea-code-editor';
65+
import rehypePrism from "rehype-prism-plus";
66+
import rehypeRewrite from "rehype-rewrite";
67+
import "./styles.css";
68+
69+
function App() {
70+
const [code, setCode] = React.useState(
71+
`function add(a, b) {\n return a + b;\n}`
72+
);
73+
return (
74+
<CodeEditor
75+
value={code}
76+
language="js"
77+
placeholder="Please enter JS code."
78+
onChange={(evn) => setCode(evn.target.value)}
79+
padding={15}
80+
rehypePlugins={[
81+
[rehypePrism, { ignoreMissing: true }],
82+
[
83+
rehypeRewrite,
84+
{
85+
rewrite: (node, index, parent) => {
86+
if (node.properties?.className?.includes("code-line")) {
87+
if (index === 0 && node.properties?.className) {
88+
node.properties.className.push("demo01");
89+
// console.log("~~~", index, node.properties?.className);
90+
}
91+
}
92+
if (node.type === "text" && node.value === "return" && parent.children.length === 1) {
93+
parent.properties.className.push("demo123");
94+
}
95+
}
96+
}
97+
]
98+
]}
99+
style={{
100+
fontSize: 12,
101+
backgroundColor: "#f5f5f5",
102+
fontFamily: 'ui-monospace,SFMono-Regular,SF Mono,Consolas,Liberation Mono,Menlo,monospace',
103+
}}
104+
/>
105+
);
106+
}
107+
```
108+
59109
## Support Nextjs
60110
61111
Use examples in nextjs. [#31](https://github.com/uiwjs/react-textarea-code-editor/issues/31#issuecomment-909363339)

0 commit comments

Comments
 (0)