How to disable code highlighting feature
omid opened this issue · 12 comments
Code highlighting feature is very large. And I actually don't need it at all.
How to disable it completely if we don't want to use code highlighting feature at all?
(I'm using Vite)
react-md-editor/core/src/Editor.tsx
Lines 113 to 117 in a3f09f3
@omid This is the code highlighting language pack with markdown preview
Ok, how can I remove that from the package @jaywcjlove ?
@omid If you remove the default code highlighting, it will disappear.
It's not easy to get rid of this package.
How can I remove the default code highlighting?
I set highlightEnable as false
. What else?
@omid I thought of a perfect solution
Provide a new component that does not contain rehype-prism-plus
. It will not be included in the packaging code after testing and packaging.
import MDEditor from '@uiw/react-md-editor/nohighlight';
@omid upgrade v3.25.0
Remove Code Highlight
The following example can help you exclude code highlighting code from being included in the bundle. @uiw/react-md-editor/nohighlight
component does not contain the code highlighting package, rehype-prism-plus
, highlightEnable
and showLineNumbers
functions will no longer work. (#586)highlight line
import React from "react";
import MDEditor from '@uiw/react-md-editor/nohighlight';
const code = `**Hello world!!!**
\`\`\`js
function demo() {}
\`\`\`
`
export default function App() {
const [value, setValue] = React.useState(code);
return (
<div className="container">
<MDEditor
value={value}
onChange={setValue}
/>
<MDEditor.Markdown source={value} style={{ whiteSpace: 'pre-wrap' }} />
</div>
);
}
Thanks a lot @jaywcjlove. It works 🎉
Now the package is 0.5MB smaller in gzip (1MB uncompressed).
There is a tiny issue.
After I upgrade to 3.25.0 and apply the changes.
I'm getting this error:
src/components/text-editor/text-editor.tsx:2:22 - error TS2307: Cannot find module '@uiw/react-md-editor/nohighlight' or its corresponding type declarations.
2 import MDEditor from '@uiw/react-md-editor/nohighlight';
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Found 1 error in src/components/text-editor/text-editor.tsx:2
So I needed to add a // @ts-ignore
above it :/
@omid Upgrade v3.25.1
All is good, thanks @jaywcjlove