[Documentation]: FAQ: Adding new languages to the syntax highlighter is no longer an issue

[Clindbergh]

Describe the problem

Currently the FAQ states

Why aren't my code blocks highlighted with Storybook MDX
Out of the box, Storybook provides syntax highlighting for a set of languages (e.g., Javascript, Markdown, CSS, HTML, Typescript, GraphQL) you can use with your code blocks. Currently, there's a known limitation when you try and register a custom language to get syntax highlighting. We're working on a fix for this And will update this section once it's available.
https://storybook.js.org/docs/faq#why-arent-my-code-blocks-highlighted-with-storybook-mdx

Thanks to #23166 / #19794 / #21341 this is no longer an issue.

With storybook 7.6.3 and these packages

    "@types/react-syntax-highlighter": "^15.5.11",
    "react-syntax-highlighter": "^15.5.0",

this code in preview.ts

import scss from 'react-syntax-highlighter/dist/esm/languages/prism/scss';

SyntaxHighlighter.registerLanguage('scss', scss);

enables code highlighting in mdx:

@import '../../../src/lib/scss/variables';

.clazz {
  background-color: $ultra-fancy-blue;
}

Additional context

No response

[shilman]

This is actually a regression. At some point all of the themes got added back into the doc blocks, so the bundle size is much larger than it should be. I hope we are able to fix this in 8.0. Once we do, Storybook will be more efficient but this documentation will be needed.

[nguyenyou]

Hi @shilman ,

I'm working on a design system using ScalaJS (ScalaJS-React, to be exact) and we would love to show scala code in codeblock. May I ask, how do we enable Scala language support for codeblock? Thank you for working on Storybook, it's really good.

[psychobolt]

I was able to get the code highlight syntax for scss in my MDX docs with the following snippet in preview.ts:

import { SyntaxHighlighter } from '@storybook/components';
import scss from 'react-syntax-highlighter/dist/esm/languages/prism/scss';

SyntaxHighlighter.registerLanguage('scss', scss);

[cascornelissen]

Great find @psychobolt 😍 I noticed react-syntax-highlighter uses refractor so this can also be written like so:

import { SyntaxHighlighter } from '@storybook/components';
import scss from 'refractor/lang/scss';

SyntaxHighlighter.registerLanguage('scss', scss);

[messenjer]

It would be great to consider switching to Shiki --> There is an issue for it #29160

[psychobolt]

For Storybook 9, import { SyntaxHighlighter } from 'storybook/internal/components';

[MichaelAllenWarner]

Based on comments in this thread, I've tried the following in preview.ts to get syntax-highlighting working with the Docs add-on for an unsupported language (in Storybook 9):

import { SyntaxHighlighter } from 'storybook/internal/components';
import twig from 'react-syntax-highlighter/dist/esm/languages/prism/twig';

SyntaxHighlighter.registerLanguage('twig', twig);

const parameters = {
  docs: {
    codePanel: true,
    source: {
      language: 'twig',
      // ...
    },
  },
  // ...
};

const preview = {
  parameters,
  // ...
};

export default preview;

This does the trick for the "Show code" feature in the Docs story, but it does not work for the "Code" panel. Haven't found a solution yet.