Storybook: Syntax highlighting for C#

[cgatian]

Describe the bug
Code highlighting should work with C# in MDX stories

To Reproduce

1. Create a new story
2. Add code snippet using markdown code block syntax or with SyntaxHighlighter

Expected behavior
Code highlighted

Screenshots

Code snippets

<SyntaxHighlighter language="C#" copyable={true}>
{`
 // A Hello World! program in C#.
        using System;
        namespace HelloWorld
        {
          class Hello
          {
            static void Main()
            {
              Console.WriteLine("Hello World!");
              // Keep the console window open in debug mode.
              Console.WriteLine("Press any key to exit.");
              Console.ReadKey();
            }
          }
        }
`}
</SyntaxHighlighter>

System:
Environment Info:

System:
OS: Windows 10
CPU: (8) x64 Intel(R) Core(TM) i7-7820HQ CPU @ 2.90GHz
Binaries:
Node: 10.16.0 - C:\Program Files\nodejs\node.EXE
Yarn: 1.16.0 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
npm: 6.9.0 - C:\Program Files\nodejs\npm.CMD
Browsers:
Edge: 42.17134.1.0
npmPackages:
@storybook/addon-a11y: ^5.2.0-beta.38 => 5.2.0-beta.38
@storybook/addon-actions: ^5.2.0-beta.38 => 5.2.0-beta.38
@storybook/addon-docs: ^5.2.0-beta.38 => 5.2.0-beta.38
@storybook/addon-knobs: ^5.2.0-beta.38 => 5.2.0-beta.38
@storybook/addon-links: ^5.2.0-beta.38 => 5.2.0-beta.38
@storybook/addon-notes: ^5.2.0-beta.38 => 5.2.0-beta.38
@storybook/addon-viewport: ^5.2.0-beta.38 => 5.2.0-beta.38
@storybook/addons: ^5.2.0-beta.38 => 5.2.0-beta.38
@storybook/angular: ^5.2.0-beta.38 => 5.2.0-beta.38

[shilman]

We're using react-syntax-highlighter internally.

Can you try adding the folllowing to .storybook/config.js:

import { registerLanguage } from 'react-syntax-highlighter/prism-light';
import csharp from 'react-syntax-highlighter/languages/prism/csharp';

registerLanguage('C#', csharp);

I don't have a good sense for the tradeoff of including this out of the box vs. making it a user configuration like the above.

[cgatian]

Thank you for the reply. I will try your suggestion.

Sorry if this request was misguided, I assumed when I found a C# story for SyntaxHighlighter in the source this should just work.

[shilman]

Hahaha, I just checked and the C# story is called ... "unsupported"!!

Right now we include jsx, bash, css in addition to react-syntax-highlighter's defaults (whatever those are?). I'm guessing the reason we don't include more is about tree-shaking (@ndelangen confirm?) and that it's probably enough to document how to add your own.

[ndelangen]

@cgatian I added that story to showcase what happens if a language is given, but it's not installed.