How to highlight specify languages in Next.js

Default Language

The following languages are the default highlighted languages.

• xml
• bash
• c
• cpp
• csharp
• css
• markdown
• diff
• ruby
• go
• graphql
• ini
• java
• javascript
• json
• kotlin
• less
• lua
• makefile
• perl
• objectivec
• php
• php-template
• plaintext
• python
• python-repl
• r
• rust
• scss
• shell
• sql
• swift
• yaml
• typescript
• vbnet
• wasm

If the languages you want to highlight are not included, you should add all languages in the editing.

All the language you can highlight is below.

ref. highlight.js/SUPPORTED_LANGUAGES.md at main · highlightjs/highlight.js · GitHub

Settings

Import libraries of each language you use.

import apache from 'highlight.js/lib/languages/apache'
import java from 'highlight.js/lib/languages/java'

const languages = (() => {
  return {
    apache,
    java,
  }
})()

export default languages

* If you use this option, the languages you specify will only be highlighted.

import { MDXRemote, MDXRemoteProps } from 'next-mdx-remote/rsc'
import { JSX } from 'react'
import rehypeHighlight from 'rehype-highlight'

import languages from '@/app/languages'

const components = {
  h1: ({ children }: { children: string }) => (
    <h1 id={children} className="mt-12 mb-6 font-bold text-2xl text-center">
      {children}
    </h1>
  ),
}

export function CustomMDX(props: JSX.IntrinsicAttributes & MDXRemoteProps) {
  return (
    <MDXRemote
      {...props}
      components={{
        ...components,
        ...(props.components || {}),
      }}
      options={{
        mdxOptions: {
          remarkPlugins: [],
          rehypePlugins: [[rehypeHighlight, { languages }]],
        },
      }}
    />
  )
}

How to Use Additional Packages

For example, install the packages of Solidity and VBA and declare each module.

$ npm i highlightjs-solidity highlightjs-vba

declare module 'highlightjs-solidity'

import { solidity } from 'highlightjs-solidity'
import vba from 'highlightjs-vba'

const languages = (() => {
  return {
    solidity,
    vba,
  }
})()

export default languages