Skip to main content

Code Blocks in Markdown

Code blocks are the heart of technical documentation.

In CodeHarborHub (powered by Docusaurus & MDX), code blocks are super-powered. You can add syntax highlighting, titles, live editors, and even interactive tabs.

This guide shows you everything you can do with code blocks, with real examples.

Basic Code Block​

Wrap your code with three backticks (```) and specify the language for syntax highlighting.

```js
console.log("Hello CodeHarborHub!");
```
http://localhost:3000
console.log("Hello CodeHarborHub!");

✅ Tip: Always specify the language (like js, python, html) for better highlighting.

Adding a Title​

Give your readers context by adding a title to your code block.

```jsx title="/src/components/Greeting.js"
export default function Greeting() {
  return <h1>Hello World!</h1>;
}
```
http://localhost:3000
/src/components/Greeting.js
export default function Greeting() {
  return <h1>Hello World!</h1>;
}

Syntax Highlighting & Themes​

CodeHarborHub uses Prism for beautiful syntax highlighting.

You can customize the theme in docusaurus.config.js:

docusaurus.config.js
import { themes as prismThemes } from "prism-react-renderer";

export default {
  themeConfig: {
    prism: {
      theme: prismThemes.dracula, // Dark & vibrant
    },
  },
};

Supported languages include JavaScript, Python, Java, C++, and many more. To add extra languages (like PowerShell or Rust):

docusaurus.config.js
export default {
  themeConfig: {
    prism: {
      additionalLanguages: ["powershell", "rust"],
    },
  },
};

Restart the dev server to see the changes.

Highlighting Lines​

Highlight key lines to draw attention.

With magic comments:

```js
function importantCode() {
  return "⚡ This line is important!";
}
```
http://localhost:3000
function importantCode() {
  return "⚡ This line is important!";
}

With meta string:

```js {2}
function importantCode() {
  return "⚡ This line is important!";
}
```

Line Numbers​

Add line numbers for easier references.

```jsx showLineNumbers
function Example() {
  return <p>Line numbers are enabled!</p>;
}
```
http://localhost:3000
function Example() {
  return <p>Line numbers are enabled!</p>;
}

You can even start counting from a specific number:

```jsx showLineNumbers=5
function Example() {
  return <p>Starts from 5!</p>;
}
```

Live Code Editor​

Want readers to experiment directly? Turn any code block into a live playground using live.

Install the plugin first:

npm install --save @docusaurus/theme-live-codeblock

Enable it in docusaurus.config.js:

export default {
  themes: ["@docusaurus/theme-live-codeblock"],
};

Now create a live block:

```jsx live
function Counter() {
  const [count, setCount] = React.useState(0);
  return <button onClick={() => setCount(count + 1)}>Count: {count}</button>;
}
```
http://localhost:3000
Live Editor
function Counter() {
  const [count, setCount] = React.useState(0);
  return <button onClick={() => setCount(count + 1)}>Count: {count}</button>;
}
Result
Loading...

Users can edit the code and see instant results!

Multi-Language Tabs​

Show the same example in multiple languages using <Tabs> and <TabItem>.

import Tabs from "@theme/Tabs";
import TabItem from "@theme/TabItem";

<Tabs>
<TabItem value="js" label="JavaScript">

```js
console.log("Hello from JavaScript!");
```

</TabItem>
<TabItem value="py" label="Python">

```python
print("Hello from Python!")
```

</TabItem>
</Tabs>
http://localhost:3000
console.log("Hello from JavaScript!");

Advanced Tricks​

Custom Magic Comments​

Create your own highlight styles.

docusaurus.config.js
export default {
  themeConfig: {
    prism: {
      magicComments: [
        {
          className: "code-block-error-line",
          line: "This will error",
        },
      ],
    },
  },
};

Then style it in CSS:

src/css/custom.css
.code-block-error-line {
  background: #ff000020;
  border-left: 3px solid #ff000080;
}

Interactive Imports​

For live blocks, add custom components to the live scope:

npm run swizzle @docusaurus/theme-live-codeblock ReactLiveScope -- --eject

Then modify src/theme/ReactLiveScope/index.js:

import React from "react";

const FancyButton = (props) => (
  <button
    style={{ padding: 10, background: "#0070f3", color: "#fff" }}
    {...props}
  />
);

export default {
  React,
  FancyButton,
};

Now you can use <FancyButton> inside your live code block!

Best Practices​

  • Use comments for highlighting when code length changes frequently.
  • Always specify a language for better syntax highlighting.
  • Combine line numbers with highlights for tutorials and step-by-step guides.
  • Keep code blocks short & focused. Long blocks reduce readability.

✅ Summary​

FeatureSyntax Example
Title```js title="file.js"
Line Highlight```js {1,3-5} or // highlight-next-line
Line Numbers```js showLineNumbers
Live Editor```jsx live
Multi-Lang Tabs<Tabs> + <TabItem>

Code blocks are not just static snippets they can be interactive teaching tools. Use these features to create engaging, developer-friendly docs in CodeHarborHub.