How to use CodeBlock component in mdx?

[jcubic]

I want to put range from GitHub file. This is my code:

import { useEffect, useState } from 'react';
import { extname } from 'path-browserify';

// I've swizzle the CodeBlock because I need to change one thing
// when loading prism.js language files
import CodeBlock from '@site/src/theme/CodeBlock';
// this work the same
// import CodeBlock from '@theme/CodeBlock';

const mapping = {
    js: 'javascript',
    scm: 'scheme',
    html: 'html',
    css: 'css'
} as const;

type GitHubSnippetProps = {
  repo: string;
  username: string;
  branch: string;
  path: string;
  lines: [number, number];
};

function getLines(code: string, range: [number, number]) {
  const lines = code.split('\n');
  const [start, end] = range;
  return lines.slice(start, end).join('\n');
}

export default function GitHubSnippet({ repo, username, branch, path, lines }: GitHubSnippetProps) {
  const [code, setCode] = useState<string | null>(null);
  const ext = extname(path).substring(1);
  const language = mapping[ext] ?? 'none';

  useEffect(() => {
    const controller = new AbortController();
    const url = `https://raw.githubusercontent.com/${username}/${repo}/${branch}${path}`;
    fetch(url, { signal: controller.signal }).then(res => {
      return res.text();
    }).then(code => {
      setCode(getLines(code, lines));
    });
    return () => controller.abort();
  }, []);

  return (
    <CodeBlock
      title={path}
      showLineNumbers={true}
      language={language}
    >
      {code ?? 'loading ...'}
    </CodeBlock>
  );
}

This is how I use this component:

<GitHubSnippet
  username="jcubic"
  repo="lips"
  branch="old-version"
  path="/src/lips.js"
  lines={[201, 204]}
/>

This is the output:

The line 1 and 3 are visible when you scroll.

What is the proper way of using CodeBlock? And also how to start the line numbers from something other than 1?

I use Docusaurus 3.6.1.

[slorber]

The line 1 and 3 are visible when you scroll.

I don't understand what you mean, the screenshot above doesn't show line 1 and 3

What is the proper way of using CodeBlock?

What does "proper" mean? <CodeBlock> usage is documented here: https://docusaurus.io/docs/next/markdown-features/code-blocks#usage-in-jsx

If that's not enough, please let me know what you need more.

Also, when testing this, please remove all the related complexity: fetching code from GitHub is generic React knowledge, and is not directly related to <CodeBlock>. It is better to achieve what you want with a hardcoded code string first, and only then complexity by fetching that source remotely.

And also how to start the line numbers from something other than 1?

Coming in Docusaurus v3.8, and available in canary.

#10846

https://docusaurus.io/docs/next/markdown-features/code-blocks#line-numbering

-showLineNumbers={true}
+showLineNumbers={3}

[jcubic]

I mean, the title is not styled, it's the same as text above the code.

And the 1,3 are here, I said that you need to scroll to see them:

[slorber]

I can't scroll a gif/video, only a repro. Show me a repro with a static hardcoded string usage and I'll take a look.

[jcubic]

It's not harcoded code, the code is fetched from GitHub.

I think that I will just not use CodeBlock directly, outside of ```syntax``` because it doesn't work.

It seems that the only way is to just copy/paste the code into ```code block```.

Thanks for you time.

[slorber]

It's not harcoded code, the code is fetched from GitHub.

I know it is fetched code. But wherever the code comes from, at the end of the day the React component receives a children prop that is a string. If you have a bug, remove the complexity that surrounds it, remove all the things that are irrelevant (ie fetching code) and pass a static string, ensuring that it works (or not) with that static string. Maybe what you think you fetch is not what you actually fetch.