Custom code rendering

[matkoch]

Hi everyone!

I'm maintaining an OSS .NET project and it took me forever to research a better platform to deliver documentation. Now that I've found Docusaurus, I feel almost embarrassed seeing how popular it is, but again, it's probably because I have absolutely no connection to frontend technology.

Docusaurus seems to have absolutely everything I wished for and more. The only thing I have no clue how to accomplish is custom code rendering. So instead of using regular code fences and specifying the language, I'd like to provide my own <pre><code> fragments that already have <span class="keyword"> and other custom classes, along with my custom CSS.

I've found another discussion #3009 and realized I could do <span class={ ... }>, which seemed like a good start, but apparently, I lose features like the copy button and file titles.

Any help would be greatly appreciated.

[Josh-Cena]

Hi! Docusaurus uses prism-react-renderer to render your code. If you want another renderer, you can swizzle CodeBlock and re-implement it whichever way you want. https://deploy-preview-6296--docusaurus-2.netlify.app/docs/using-themes/

[matkoch]

Shouldn't this work then in an mdx file?

import CodeBlock from '@theme/CodeBlock';

<CodeBlock>
<span class="foo">Foo</span>
</CodeBlock>

[Josh-Cena]

Yes, it does. Nit: should be className="foo"

[matkoch]

I'm getting an error though (crashed page) :(

content.replace is not a function

Even with the other example from the docs:

<pre>
  <b>Input: </b>1 2 3 4{'\n'}
  <b>Output: </b>"366300745"{'\n'}
</pre>

I end up with:

[Josh-Cena]

If you use JSX in your code block, you have to get rid of a lot of processing we have done because they are done on the assumption that the content is plain string. This has been improved in the next version. Since the infrastructure has changed quite a bit in the next version, I suggest you use canary version and re-swizzle your component.

[Josh-Cena]

See #6177