MAIS AMOR POR FAVOR

MDsveX rehype Plugins: Pimp your Blog Posts

MDsveX rehype Plugins

MDsveX rehype Plugins: Pimp your Blog Posts

SHARE:

πŸ”Œ MDsveX rehype Plugins: Introduction

MDsveX rehype plugins offer an easy way to add some polish to your markdown based content. They work by inserting themselves into the generation process of your site's HTML from markdown. We focus on rehype plugins in this video, though remark plugins also offer fantastic functionality, doing their magic slightly earlier in the generation process. We will see how it takes less than five minutes to add automatically generated tables of contents to your blog posts. What's more, it's nothing more complicated than installing a couple of plugins and adding them to an array in our config. Although we just look at tables of contents (toc) here, you can also use rehype plugins to make your emoji accessible , sanitise HTML or add syntax highlighting . You can apply what we see in this videos to any of those applications and more. Take a look at the video and throw your questions into a comment below.

πŸ“Ή MDsveX rehype Plugins: Video

MDsveX rehype Plugins

πŸ–₯ Code

Installing the Plugins

pnpm add -D @jsdevtools/rehype-toc rehype-slug # or use npm instead of pnpm
Install the rehype plugins used in the video.

Updating the SvelteKit Configuration

svelte.config.js
svelte
1/** @type {import('@sveltejs/kit').Config} */
2import adapter from '@sveltejs/adapter-netlify';
3import { mdsvex } from 'mdsvex';
4import preprocess from 'svelte-preprocess';
5import toc from '@jsdevtools/rehype-toc';
6import rehypeSlug from 'rehype-slug';
7
8const config = {
9 extensions: ['.svelte', '.md', '.svelte.md'],
10 preprocess: [
11 mdsvex({ extensions: ['.svelte.md', '.md', '.svx'], rehypePlugins: [rehypeSlug, toc] }),
12 preprocess({
13 scss: {
14 prependData: "@import 'src/lib/styles/variables.scss';",
15 },
16 }),
17 ],
18 ...
Configure mdsvex to use the rehype plugins.

Some Styling

src/lib/styles/styles.scss
svelte
172h1 > a {
173 color: inherit;
174 text-decoration: none;
175}
176h2 > a,
177h3 > a,
178h4 > a,
179h5 > a,
180h6 > a {
181 text-decoration: none;
182 color: inherit;
183}
184
185.toc {
186 .toc-level-1 {
187 font-size: $font-size-3;
188 font-weight: $font-weight-bold;
189 }
190}
Add some basic styling to the table of contents.

πŸ—³οΈ Poll

How familiar are you with rehype and remark plugins?
Voting reveals latest results.

πŸ™πŸ½ MDsveX rehype Plugins: Feedback

If you have found this video useful, see links below for related content on this site. I do hope you learned one new thing from the video. Let me know if there are any ways I can improve on it. I hope you will use the code or starter in your own projects. Be sure to share your work on Twitter, giving me a mention so I can see what you did. Finally be sure to let me know ideas for other short videos you would like to see. Read on to find ways to get in touch, further below. If you have found this post useful, even though you can only afford even a tiny contribution, please consider supporting me through Buy me a Coffee.

Finally, feel free to share the post on your social media accounts for all your followers who will find it useful. As well as leaving a comment below, you can get in touch via @askRodney on Twitter and also askRodney on Telegram . Also, see further ways to get in touch with Rodney Lab. I post regularly on SvelteKit as well as Search Engine Optimisation among other topics. Also subscribe to the newsletter to keep up-to-date with our latest projects.