Including code hike to a Subsequent.js utility
MDX is a format that mixes markup in markdown together with JSX code to embed parts into markdown paperwork. It’s utilized in documentation, weblog posts, and rather more as one can add interactive examples with JSX. You’ll be able to be taught extra about it here.
As we speak, we’re going to take a look at a library referred to as Code Hike that gives distinctive options on markdown code blocks. These consists of focussing code, adding filenames and displaying them as tabs, annotations, linking text to code, and rather more! It additionally has in-built assist for syntax highlighting.
Allow us to loook at including Code Hike to a Subsequent.js utility. Do observe that though MDX is supported by a lot of frameworks like Vue, Svelte, and many others, Code Hike solely works with React.
Live Demo <> GitHub Repository
Initially, allow us to create a brand new Subsequent.js utility –
npx create-next-app code-hike-example
# OR
yarn create next-app code-hike-example
Now, open up the mission in your favourite textual content editor.
Subsequent, we have to add MDX to our Subsequent.js utility. For this, we’re going to be following the official guide on adding MDX to a Next.js application.
Do observe that Code Hike additionally works with Next MDX Remote and MDX Bundler nevertheless, we’re going to take a look at a easy instance with the official MDX plugin for Next.js.
Initially, allow us to set up the required packages –
npm set up @subsequent/mdx @mdx-js/loader
# OR
yarn add @subsequent/mdx @mdx-js/loader
Now, open up subsequent.config.js and exchange it with the next code –
We’re merely telling our bundler to deal with .md and .mdx recordsdata as pages as nicely when they’re within the pages listing. This additionally takes care of compiling our MDX.
Now, allow us to setup Code Hike
Initially, allow us to set up the Code Hike Package
npm set up @code-hike/mdx@subsequent
# OR
yarn add @code-hike/mdx@subsequent
Now, we should add Code Hike as a Remark plugin. Comment is a straightforward markdown processor that has an enormous ecosystem of plugins.
Code Hike makes use of Shiki beneath the hood to offer syntax highlighting. We are able to discover a listing of all of the supported themes here. Allow us to go along with Monokai for this tutorial.
There may be one final thing to do. We have to add the Code Hike CSS to our utility. Open up _app.js and add this one line of code to the highest
Allow us to make a brand new file referred to as code-hike.mdx beneath the pages listing. Add the next mdx markup in there –
Right here, we’re writing some fundamental markdown at first after which including 3 code blocks. In all 3 of them, I’ve supplied a filename simply after specifying the language ( js in these 3 instances).
Within the first code block, we move within the field attribute after the filename. We set it to 1[25:39] the place 1 indicated the road quantity and 25:39 signifies the vary of characters to annotate on that line.
Equally, within the second code block, we move within the focus attribute and set it to 1:2,7. Right here 1:2 signifies a variety of traces to be placed on focus. We additionally add line 7 by including it as a comma-separated worth.
For the third code block, we have now to wrap the content material and code block within the CH.Part tag. We should additionally wrap the code block within the CH.Code tag. That is in order that Code Hike is aware of which file we’re going to be referring to by way of the code hyperlinks once we specify the filename.
We’ve console.log as a code hyperlink right here that factors to focus://console.js#2. This means that every time we hover over that code hyperlink, it would focus the second line within the console.js code block.
Ultimately, that is what it ought to seem like once we navigate to
Sure, these field shadows are cool.
That was a short overview of Code Hike. Code Hike helps many extra issues like Scrollycoding and previews as nicely. Code Hike remains to be in a beta stage and lots of options are nonetheless experimental.
Hope every little thing went nicely to this point and now you should utilize Code Hike in your weblog or documentation to attain extraordinarily highly effective code blocks!
See you within the subsequent one.
