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.

[epiknut]

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

Is there a different approach for including csharp in SyntaxHighlighter these days? I'm having trouble getting something like this to work in the current version (6.2.9) of storybook.

[shilman]

@epiknut We switched over to ESM in 6.2 which enables tree shaking, which removes hundreds of unused languages from the bundle & reduces its size/improves performance dramatically. i think to get custom highlighting back we'll probably need to switch to a different highlighting library

[epiknut]

@shilman I see. Good to know, thanks for the reply :)

[ndelangen]

@epiknut @shilman this is how users can register extra languages:

storybook/lib/components/src/syntaxhighlighter/syntaxhighlighter.tsx

Lines 39 to 49 in 8b2517f

	ReactSyntaxHighlighter.registerLanguage('jsextra', jsExtras);
	ReactSyntaxHighlighter.registerLanguage('jsx', jsx);
	ReactSyntaxHighlighter.registerLanguage('json', json);
	ReactSyntaxHighlighter.registerLanguage('yml', yml);
	ReactSyntaxHighlighter.registerLanguage('md', md);
	ReactSyntaxHighlighter.registerLanguage('bash', bash);
	ReactSyntaxHighlighter.registerLanguage('css', css);
	ReactSyntaxHighlighter.registerLanguage('html', html);
	ReactSyntaxHighlighter.registerLanguage('tsx', tsx);
	ReactSyntaxHighlighter.registerLanguage('typescript', typescript);
	ReactSyntaxHighlighter.registerLanguage('graphql', graphql);

[i-am-the-slime]

@ndelangen I can't make this work (in v7 alpha), did it break?

[ndelangen]

Yeah i think this indeed breaks in 7.0.

We'll have to come up with a better solution for this.