Powerful Code Blocks with Code Hike and MDX

• code-hike-example

  1 1 0.0 CSS

GitHub Repository for this tutorial

• next-mdx-remote

  20 2,404 5.2 TypeScript

  Load mdx content from anywhere through getStaticProps in next.js

  

Do note that Code Hike also works with Next MDX Remote and MDX Bundler however, we are going to look at a simple example with the official MDX plugin for Next.js.

• SurveyJS

  surveyjs.io featured

  Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.

  

• mdx-bundler

  8 1,701 5.7 JavaScript

  🦤 Give me MDX/TSX strings and I'll give you back a component you can render. Supports imports!

Do note that Code Hike also works with Next MDX Remote and MDX Bundler however, we are going to look at a simple example with the official MDX plugin for Next.js.

• shiki

  26 8,690 9.8 TypeScript

  A beautiful yet powerful syntax highlighter

  

Code Hike uses Shiki under the hood to provide syntax highlighting. We can find a list of all the supported themes here. Let us go with Monokai for this tutorial.

• codehike

  8 4,233 5.6 TypeScript

  Marvellous code walkthroughs

  

Code Hike GitHub Repository

• remark

  42 7,240 7.0 JavaScript

  markdown processor powered by plugins part of the @unifiedjs collective (by remarkjs)

  

Now, we must add Code Hike as a Remark plugin. Remark is a simple markdown processor that has a huge ecosystem of plugins.

• mdx

  99 16,878 8.7 JavaScript

  Markdown for the component era

  

MDX is a format that combines markup in markdown along with JSX code to embed components into markdown documents. It is used in documentation, blog posts, and much more as one can add interactive examples with JSX. You can learn more about it here.

• InfluxDB

  www.influxdata.com featured

  Power Real-Time Data Analytics at Scale. Get real-time insights from all types of time series data with InfluxDB. Ingest, query, and analyze billions of data points in real-time with unbounded cardinality.

  

Suggest a related project