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.
Initially, allow us to create a brand new Subsequent.js utility –
npx create-next-app code-hike-example
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.
Initially, allow us to set up the required packages –
npm set up @subsequent/mdx @mdx-js/loader
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
.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
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.
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.
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.