diff --git a/README.md b/README.md index 869d9d86..baf2f20a 100644 --- a/README.md +++ b/README.md @@ -56,6 +56,56 @@ function App() { } ``` +## Highlight line or character + +[![Open in CodeSandbox](https://codesandbox.io/embed/https-github-com-uiwjs-react-textarea-code-editor-issues-151-nsm7qp?fontsize=14&hidenavigation=1&theme=dark) + +```jsx +import CodeEditor from '@uiw/react-textarea-code-editor'; +import rehypePrism from "rehype-prism-plus"; +import rehypeRewrite from "rehype-rewrite"; +import "./styles.css"; + +function App() { + const [code, setCode] = React.useState( + `function add(a, b) {\n return a + b;\n}` + ); + return ( + setCode(evn.target.value)} + padding={15} + rehypePlugins={[ + [rehypePrism, { ignoreMissing: true }], + [ + rehypeRewrite, + { + rewrite: (node, index, parent) => { + if (node.properties?.className?.includes("code-line")) { + if (index === 0 && node.properties?.className) { + node.properties.className.push("demo01"); + // console.log("~~~", index, node.properties?.className); + } + } + if (node.type === "text" && node.value === "return" && parent.children.length === 1) { + parent.properties.className.push("demo123"); + } + } + } + ] + ]} + style={{ + fontSize: 12, + backgroundColor: "#f5f5f5", + fontFamily: 'ui-monospace,SFMono-Regular,SF Mono,Consolas,Liberation Mono,Menlo,monospace', + }} + /> + ); +} +``` + ## Support Nextjs Use examples in nextjs. [#31](https://github.com/uiwjs/react-textarea-code-editor/issues/31#issuecomment-909363339)