uiwjs/react-md-editor

How to disable code highlighting feature

omid opened this issue · 12 comments

omid commented

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)

@omid

/**
* Disable editing area code highlighting. The value is `false`, which increases the editing speed.
* @default true
*/
highlightEnable?: boolean;

omid commented

Thanks, but I still see them:
image

@omid This is the code highlighting language pack with markdown preview

omid commented

Ok, how can I remove that from the package @jaywcjlove ?

omid commented

Output of npm ls refractor is:
image

@omid If you remove the default code highlighting, it will disappear.

image

It's not easy to get rid of this package.

omid commented

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 rehype-prism-plus code highlighting package, highlightEnable, showLineNumbers and highlight line functions will no longer work. (#586)

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>
  );
}
omid commented

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.
image

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

omid commented

All is good, thanks @jaywcjlove