Changing theme

[Lucjus]

How can I change white default gh theme to a theme of my own choice? Is there any other way than overwriting css classes one by one?

[jaywcjlove]

I have not customized other themes, and there is no other way. @Lucjus

[sametweb]

If you are talking about the code block themes in preview, here is the way:

<MDEditor
  previewOptions={{ components: CodeBlock }}
  // other props
/>

CodeBlock.js

import {PrismAsync as SyntaxHighlighter} from 'react-syntax-highlighter'
import {vscDarkPlus} from 'react-syntax-highlighter/dist/cjs/styles/prism'

const CodeBlock = {
  code({children, className, ...props}) {
    let language = 'jsx'
	if (className) {
	  language = className.split('-')[1]
	}

	return (
	  <SyntaxHighlighter
	    wrapLines
	    wrapLongLines
	    showLineNumbers
	    style={vscDarkPlus}
	    PreTag='div'
	    language={language}
	    {...props}>
	    {String(children).replace(/\n$/, '')}
	    </SyntaxHighlighter>
	)
    },
}

export default CodeBlock

[Lucjus]

@sametweb That was it! Thank You!

[michaelnicol]

I need to use light theme for the website I am working on, and it's been an absolute pain dealing with the styling of the markdown editor. I used some CSS to target the components of the editor to make it light theme.

The problem is that I can't make the bolded text black instead of blue in the editor. Styles have no effect on the colors or font sizes of text in the editor. It's permanently stuck at 16 px font size, which is too small for my clients to read.

Because of this simple issue, I now have to find a different library.