Does Docz support syntax highlighting outside of Playground?

Question

Does Docz support syntax highlighting outside of the Playground component?

Description

In addition to adding React component documentation, I am using Docz to document an entire system, at least half of which has nothing to do with React. Therefore, I need the ability to add “other” code snippets with the appropriate syntax highlighting.

For example, this does not seem to work:

Inside my file.mdx:

It produces the following in the docz-theme-default theme:

The syntax highlighting for SCSS is not working. Syntax highlighting outside of the Playground, in general, does not work well, even for Javascript snippets.

Am I doing something wrong? Does Docz support this? Or maybe this is an MDX problem?

If this does not work, how can I help?

[meebix]

@pedronauck - I think we should reopen this. The above gets rid of the “Codemirror not defined” error, but the hightlight does not work. Let me explain what I tested.

From the Codemirror docs, it appears that hightlighting for scss or less comes directly from the CSS mode in the form of mime types, which are text/x-scss and text/x-less. Therefore, you do not need to import another package. Importing the CSS mode is good enough.

You would think you could also pass mode: 'scss' but for some reason you cannot. The highlighting does not work.

It does work if you pass mode: 'text/x-scss'.

Weird, right?

Since you already import the CSS package here: https://github.com/pedronauck/docz/blob/master/packages/docz-theme-default/src/components/ui/Editor/index.tsx#L21

I propose that to at least support scss and less in addition to css, we make an immediate change like this:

const getLanguage = (children: any) => {
  const defaultLanguage = 'jsx'
  if (typeof children === 'string') return defaultLanguage
  const language = get(children, 'props.props.className') || defaultLanguage
  const result = language.replace('language-', '')
  if (result === 'js' || result === 'javascript') return 'jsx'
  if (result === 'scss') return 'text/x-scss'
  if (result === 'less') return 'text/x-less'
  return result
}

Link to code

Down the road, more changes will be necessary to allow syntax highlighting for other languages such as “Ruby” for instance.

It does not seem that adding a package like https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.40.0/mode/ruby/ruby.min.js will be good enough to support different syntax highlighting for different languages.

What do you think?

[drewlustro]

Yeah can we reopen this?