{"id":15422,"library":"codehike","title":"Code Hike","description":"Code Hike is an open-source library designed to enhance web content by transforming standard Markdown into rich, interactive experiences using React. Currently stable at version 1.1.0, the project demonstrates an active release cadence with frequent patch updates and a significant major release (v1.0.0) in August 2024. Its core functionality revolves around providing 'Fine-grained Markdown' and 'Headless codeblocks', which are key differentiators. Unlike traditional syntax highlighters, Code Hike parses the Abstract Syntax Tree (AST) of code blocks, enabling advanced features like line focusing, callouts, diffs, and interactive elements directly within code comments. This allows developers to build custom React components for rendering code and markdown, giving complete control over UI and behavior. It is built on the MDX ecosystem and integrates seamlessly with React-based frameworks like Next.js, making it ideal for code walkthroughs, tutorials, interactive blog posts, and comprehensive documentation sites.","status":"active","version":"1.1.0","language":"javascript","source_language":"en","source_url":"https://github.com/code-hike/codehike","tags":["javascript","react","markdown","mdx","syntax highlighting","rsc","code blocks","typescript"],"install":[{"cmd":"npm install codehike","lang":"bash","label":"npm"},{"cmd":"yarn add codehike","lang":"bash","label":"yarn"},{"cmd":"pnpm add codehike","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Code Hike is built on React and expects it to be available in the host environment as a peer dependency.","package":"react","optional":false},{"reason":"As a React-based library, React DOM is essential for rendering components in the host environment.","package":"react-dom","optional":false},{"reason":"Code Hike relies on MDX for processing Markdown, requiring an MDX runtime like @mdx-js/react to render MDX content as React components.","package":"@mdx-js/react","optional":false},{"reason":"Recommended for defining content schemas and enabling type-safe Markdown with improved TypeScript tooling.","package":"zod","optional":true}],"imports":[{"note":"These are MDX plugins, primarily used in `next.config.mjs` or similar MDX configuration files. ESM syntax is preferred. `recmaCodeHike` is for JavaScript AST transformations.","wrong":"const { remarkCodeHike } = require('codehike/mdx')","symbol":"remarkCodeHike","correct":"import { remarkCodeHike, recmaCodeHike } from 'codehike/mdx'"},{"note":"The `Pre` component is for rendering highlighted code, `RawCode` is a type, and `highlight` is an async function for syntax highlighting. `CodeHike` was a common import in v0.x, but v1 encourages building custom components from these primitives.","wrong":"import { CodeHike } from 'codehike'","symbol":"{ Pre, RawCode, highlight }","correct":"import { Pre, RawCode, highlight } from 'codehike/code'"},{"note":"For `v1.x`, the primary stylesheet is `codehike/style.css`. Earlier versions (v0.x) used `@code-hike/mdx/dist/index.css`. Some themes also require custom CSS variables to be defined for proper light/dark mode support.","wrong":"import '@code-hike/mdx/dist/index.css'","symbol":"CSS Styles","correct":"import 'codehike/style.css'"}],"quickstart":{"code":"import { remarkCodeHike, recmaCodeHike } from 'codehike/mdx'\nimport { Pre, RawCode, highlight } from 'codehike/code'\nimport 'codehike/style.css'\n\n// next.config.mjs (or similar MDX configuration)\nconst chConfig = {\n  // Define a custom component to render code blocks\n  components: { code: 'MyCode' },\n  syntaxHighlighting: {\n    theme: 'github-dark'\n  }\n}\n\nconst mdxOptions = {\n  remarkPlugins: [[remarkCodeHike, chConfig]],\n  recmaPlugins: [[recmaCodeHike, chConfig]],\n  jsx: true,\n}\n\n// app/components/MyCode.tsx (React Server Component)\n// This component renders an annotated code block.\nexport async function MyCode({ codeblock }: { codeblock: RawCode }) {\n  const highlighted = await highlight(codeblock, \"github-dark\");\n  return <Pre code={highlighted} />;\n}\n\n// app/page.mdx (example MDX content)\n// ```js\n// console.log(\"Hello from Code Hike!\")\n// // ! focus\n// ```\n","lang":"typescript","description":"This quickstart demonstrates the core setup for Code Hike with MDX and a custom React Server Component for rendering code blocks with highlighting and annotations."},"warnings":[{"fix":"Consult the official migration guide for Code Hike v1.0. Incremental adoption is supported by using `ignoreCode` in your configuration to opt-in specific code blocks to v1.","message":"Version 1.0.0 introduced significant breaking changes with 'Fine-grained Markdown' and 'Headless codeblocks'. Migration from v0.x requires updating MDX configurations and custom code block components.","severity":"breaking","affected_versions":">=1.0.0"},{"fix":"Ensure your framework supports RSCs for components using `highlight`. If not, configure Code Hike to perform highlighting during the MDX compilation step by defining `syntaxHighlighting.theme` in `chConfig` directly in `next.config.mjs`.","message":"The `highlight` function is asynchronous, making components that use it (e.g., custom code block components) React Server Components (RSCs). This might require specific framework configurations or handling for non-RSC environments.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Copy the required CSS variables from the Code Hike documentation for your chosen theme and include them in your project's global CSS, adapting selectors (e.g., `:root`, `@media (prefers-color-scheme: dark)`).","message":"When using built-in themes like `github-from-css` or `material-from-css`, you must define the corresponding CSS variables for colors in your global stylesheet for proper light/dark mode support. Simply importing the theme won't apply the styles correctly.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Code Hike is designed for React-based MDX setups. Consider using frameworks like Next.js, Remix, Docusaurus, Nextra, or Fuma Docs that are compatible.","message":"Astro is not officially supported by Code Hike because MDX files are compiled to Astro components instead of React components, which is incompatible with Code Hike's React-based architecture.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Ensure all options passed to `remarkCodeHike` and `recmaCodeHike` in `next.config.mjs` are serializable. If issues persist, consider disabling Turbopack or using a stable version of Next.js that has proven compatibility. Report specific errors on the Code Hike GitHub.","message":"Users have reported intermittent build issues and 'TurbopackInternalError' when using Code Hike with Next.js's Turbopack bundler, especially with non-serializable options in `next.config.mjs` or newer Next.js versions.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-21T00:00:00.000Z","next_check":"2026-07-20T00:00:00.000Z","problems":[{"fix":"Add `'use client'` at the top of the React component file that directly or indirectly uses `createContext` or other client-only React hooks/APIs.","cause":"Attempting to use React Context API or other client-side React features within a server component, often when rendering MDX content in Next.js App Router without proper client component boundaries.","error":"TypeError: ke.createContext is not a function OR createContext only works in Client Components. Add the \"use client\" directive at the top of the file to use it."},{"fix":"Ensure the MDX compilation environment correctly provides the `file.history` or equivalent context that allows Code Hike to resolve relative file paths, especially when integrating with custom MDX loaders or bundler configurations.","cause":"The `!from` directive used in Markdown to import external code cannot resolve the specified file path, usually because the MDX compiler function was called without setting the `file` path or context correctly.","error":"Error: Code Hike couldn't resolve this annotation: !from [filepath]. [absolute_filepath] doesn't exist."},{"fix":"Verify that your Markdown content uses the correct decoration syntax (e.g., `!decorationName`) and that the parsing logic in your React component correctly extracts and passes the `steps` prop. Review Code Hike's documentation examples for content structuring.","cause":"When using Code Hike's layout components (e.g., `Scrollycoding`, `Slideshow`) or the `parse` utility, the decorated Markdown content is not correctly structured or passed as the expected `steps` array prop.","error":"ERROR at root Error for `steps`: Required { \"expected\": \"array\", \"received\": \"undefined\" }"}],"ecosystem":"npm"}