Integrations
Integrating code-hike/mdx with mdx-bundler has never been easier. It streamlines the process, making the experience of combining these powerful tools incredibly smooth.
mdx.server.ts
_53import { remarkCodeHike } from '@code-hike/mdx'_53import { bundleMDX } from 'mdx-bundler'_53_53export async function getFileBySlug(type: ContentType, slug: string) {_53 const source = slug_53 ? readFileSync(join(process.cwd(), 'src', 'contents', type, `${slug}.mdx`), 'utf8')_53 : readFileSync(join(process.cwd(), 'src', 'contents', `${type}.mdx`), 'utf8')_53_53 const { code, frontmatter } = await bundleMDX({_53 source,_53 mdxOptions(options) {_53 options.remarkPlugins = [_53 ...(options?.remarkPlugins ?? []),_53 remarkGfm,_53 [_53 remarkCodeHike,_53 {_53 lineNumbers: true,_53 showCopyButton: true,_53 },_53 ],_53 ]_53 options.rehypePlugins = [_53 ...(options?.rehypePlugins ?? []),_53 rehypeSlug,_53 () =>_53 rehypePrettyCode({_53 theme: 'dark-plus',_53 }),_53 [_53 rehypeAutolinkHeadings,_53 {_53 properties: {_53 className: ['hash-anchor'],_53 },_53 },_53 ],_53 ]_53_53 return options_53 },_53 })_53_53 return {_53 code,_53 frontmatter: {_53 wordCount: source.split(/\s+/gu).length,_53 readingTime: readingTime(source),_53 slug: slug || null,_53 ...frontmatter,_53 },_53 }_53}
Code hike Examples
Focus
next.config.js
_10const { remarkCodeHike } = require('@code-hike/mdx')_10const theme = require('shiki/themes/monokai.json')_10_10const withMDX = require('@next/mdx')({_10 extension: /\.mdx?$/,_10 options: {_10 remarkPlugins: [[remarkCodeHike, { theme }]],_10 rehypePlugins: [],_10 },_10})
Code Links
We are looking at the console.log function today
console.js
_10console.table(['Hello', 'World'])_10console.log('Hello World')