Skip to content

How to disable code highlighting feature #586

New issue

Have a question about this project? # for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “#”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? # to your account

Closed
omid opened this issue Oct 30, 2023 · 12 comments
Closed

How to disable code highlighting feature #586

omid opened this issue Oct 30, 2023 · 12 comments

Comments

@omid
Copy link

omid commented Oct 30, 2023

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)

@jaywcjlove
Copy link
Member

@omid

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

@omid
Copy link
Author

omid commented Oct 30, 2023

Thanks, but I still see them:
image

@jaywcjlove
Copy link
Member

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

@omid
Copy link
Author

omid commented Oct 31, 2023

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

@omid
Copy link
Author

omid commented Oct 31, 2023

Output of npm ls refractor is:
image

@jaywcjlove
Copy link
Member

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

image

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

@omid
Copy link
Author

omid commented Oct 31, 2023

How can I remove the default code highlighting?

I set highlightEnable as false. What else?

@jaywcjlove
Copy link
Member

@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';

@jaywcjlove jaywcjlove mentioned this issue Nov 1, 2023
jaywcjlove added a commit to uiwjs/react-markdown-preview that referenced this issue Nov 1, 2023
jaywcjlove added a commit to uiwjs/react-markdown-preview that referenced this issue Nov 1, 2023
github-actions bot added a commit to uiwjs/react-markdown-preview that referenced this issue Nov 1, 2023
jaywcjlove added a commit to uiwjs/react-markdown-preview that referenced this issue Nov 1, 2023
github-actions bot added a commit to uiwjs/react-markdown-preview that referenced this issue Nov 1, 2023
jaywcjlove added a commit to uiwjs/react-markdown-preview that referenced this issue Nov 1, 2023
jaywcjlove added a commit to uiwjs/react-markdown-preview that referenced this issue Nov 1, 2023
github-actions bot added a commit to uiwjs/react-markdown-preview that referenced this issue Nov 1, 2023
jaywcjlove added a commit that referenced this issue Nov 1, 2023
@jaywcjlove
Copy link
Member

@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>
  );
}

github-actions bot added a commit that referenced this issue Nov 1, 2023
@omid
Copy link
Author

omid commented Nov 1, 2023

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 :/

@jaywcjlove
Copy link
Member

@omid Upgrade v3.25.1

github-actions bot added a commit that referenced this issue Nov 1, 2023
@omid
Copy link
Author

omid commented Nov 1, 2023

All is good, thanks @jaywcjlove

@omid omid closed this as completed Nov 1, 2023
# for free to join this conversation on GitHub. Already have an account? # to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants