How to render a component and have its source code syntax-highlighted in a Pre block?

[gpbl]

In my component page, I'd like to 1) display some source code as example, and 2) show how it renders – in the same page. Code samples arestored in a ../examples directory, so that I can unit-test and reuse them.

In my page, I tried with the following code. However, it doesn't highlight the syntax of the code block with shiki.

import firstExampleRaw from '!!raw-loader!../examples/first.tsx';
import FirstExample from '../examples/first.tsx';
import { Pre } from 'nextra/components';

## First Example

This code:

<Pre data-theme="tsx">{firstExampleRaw}</Pre>

renders:

<FirstExample />

Example: https://codesandbox.io/p/sandbox/smoosh-darkness-3dqm88?file=/pages/index.mdx

In Docusaurus, we have the CodeBlock component – which already highlight the source, while the Nextra's Pre does not.

Some related discussions I could find: #1045, #2119, #1195 (where the linked doc doesn't seem to help my case).

[iamhectorsosa]

This is exactly the issue we might face with this. @ericvalcik

[gpbl]

I could find an acceptable solution:

https://codesandbox.io/p/sandbox/73vs4k?file=/pages/index.mdx

Basically, with the help of a custom component (SourceCode) and getStaticProps, I could use the shiki highlighter, the nextra built-in components and theme, to recreate the highlighted code blocks. Nice!

[preshonyee]

@gpbl I also found a way to just render the code as a string with syntax highlighting and line numbers working without having to use the fileName or filePath

I've created a single file SimpleSourceCode.tsx. I kept getting errors related to loading wasm while trying to use multiple instances of shiki, so I'm using shikiji instead of shiki since all grammars/themes/wasm are served as pure-ESM.

import React from 'react';
import { Code, Pre } from 'nextra/components';
import type { Lang, Theme } from 'shiki';
import { renderToHtml } from 'shiki';
import { getHighlighter } from 'shikiji';

type SourceCodeProps = {
  code?: string; // The string of code to render
  language?: Lang; // Language of the code
  theme?: Theme;
  showLineNumbers?: boolean;
  /** The line numbers to highlight e.g highlightLines="1,3-4" */
  highlightLines?: string;
};

export function SimpleSourceCode(props: SourceCodeProps) {
  const {
    code,
    language = 'tsx',
    theme,
    showLineNumbers,
    highlightLines,
  } = props;

  const [highlightedHtml, setHighlightedHtml] = React.useState('');

  React.useEffect(() => {
    async function highlight() {
      if (code) {
        const shiki = await getHighlighter({
          themes: ['min-light'],
          langs: [language],
        });

        const shikiHtml = shiki.codeToHtml(code, {
          lang: language,
          theme: 'min-light',
        });
        setHighlightedHtml(shikiHtml);
      }
    }
    highlight();
  }, [code, language]);

  const html = highlightedHtml
    // Remove out HTML components we replace with nextra components
    .replaceAll('</code>', '')
    .replaceAll('<code>', '')
    .replace(/<pre [^>]*>/gi, '')
    .replace('</pre>', '');
  // For some reasons, when doing this empty lines are lost
  // .replaceAll(
  //   '<span class="line"></span>',
  //   '<span class="line">\n</span>',
  //   'gi',
  // );

  // Highlight lines logic
  const linesToHighlight = highlightLines
    ? parseHighlightLines(highlightLines)
    : [];
  let lineCount = 0;
  const highlightedWithLines = html.replace(/<span class="line">/g, (match) => {
    lineCount++;
    return linesToHighlight.includes(lineCount)
      ? '<span class="line highlighted">'
      : match;
  });

  return (
    <Pre data-theme="default" data-language={language} hasCopyCode>
      <Code
        data-theme={theme}
        data-language={language}
        {...(showLineNumbers ? { 'data-line-numbers': true } : {})}
        dangerouslySetInnerHTML={{ __html: highlightedWithLines }}
      />
    </Pre>
  );
}

function parseHighlightLines(value: string): number[] {
  const parts = value.split(',');
  let lines: number[] = [];

  parts.forEach((part) => {
    if (part.includes('-')) {
      const [start, end] = part.split('-').map(Number);
      lines = lines.concat(
        Array.from({ length: end - start + 1 }, (_, i) => start + i),
      );
    } else {
      lines.push(Number(part));
    }
  });

  return lines;
}

You can use shiki.codeToThemedTokens instead of shiki.codeToHtml. Both do the same work at the end

  const [highlightedHtml, setHighlightedHtml] = React.useState('');

  React.useEffect(() => {
    async function highlight() {
      if (code) {
        const shiki = await getHighlighter({
          themes: ['min-light'],
          langs: [language],
        });

        const shikiCode = shiki.codeToThemedTokens(code, {
          lang: language,
          theme: 'min-light',
        });
        const shikiHtml = renderToHtml(shikiCode);
        setHighlightedHtml(shikiHtml);
      }
    }
    highlight();
  }, [code, language]);

This is what my markdown looks like, just that I can't get prettier formatting working nicely for template string literals. I can also use the SimpleSourceCode in a tsx file if I want.

import { Callout } from 'nextra/components';

import { SimpleSourceCode } from '../utils/SimpleSourceCode';

# Codebase setup

- VSCode settings for productivity
- VSCode tips and trick
- VSCode extensions

<Callout type="default" emoji="️🚫">
  This is a dangerous feature that can cause everything to explode.
</Callout>

<SimpleSourceCode
        code={`import React from 'react';
import { Box } from '../../../ds/design-system/build-sandpack';
import PlaceholderBox from '../../DecoratedBox';

export const BoxDemoDefault = () => {
  return (
    <Box
    css={\`
      background-color: #f3f4f6;
      border-radius: 8px;
      padding: 1rem;
    \`}>
      <PlaceholderBox />
    </Box>
  );
};`}
        language="tsx"
        showLineNumbers={true}
        highlightLines="3"
      />

[gpbl]

Good find with https://github.com/antfu/shikiji thanks for sharing.

Could you, with this last solution, import the raw content of the source? E.g. something like

import boxExample from '!!raw-loader!../boxExample.tsx';

## Markdown example

Source code:

<SimpleSourceCode code={boxExample}> ;

I could try it by myself :) I need to focus on other things. Thanks for sharing your solution, we may end up with a plugin for nextra?

[preshonyee]

@gpbl got it working by doing this

export const Example = () => {
  const [code, setCode] = React.useState('');

  const getSomething = async () => {
    const raw = await import(`!!raw-loader!./Kbd.tsx`);
    return raw;
  };

  React.useEffect(() => {
    getSomething().then((res) => {
      setCode(res.default);
    });
  }, []);

  return (
    <Box>
      <SimpleSourceCode
        code={code}
        language="tsx"
        showLineNumbers={true}
        highlightLines="3"
      />
    </Box>
  );
};

[preshonyee]

@gpbl Do you know of a similar way to load the raw content of the source of a component without loading the whole content of the file?

Say for example I have multiple exports in one file, is there a way to load the raw source of each components in the same file, without having to make separate files?

import { Comp1, Comp2 } from `!!raw-loader!./example.tsx`);

[gpbl]

@preshonyee AFAIK you cannot. You can however import the whole content of the file and parse it somehow to "extract" the functions.

[crguezl]

The comments above refer to Nextra 2. This is a comment for Nextra 3 users.

Using RemoteContent, buildDynamicMDX and getStaticProps or getServerSideProps you can manage to not only render code from a file but any arbitrary mdx!

See an example at my tutorial Dynamically read and process a MDX File