Crafting Custom flavored Markdown for Svelte with mdsvex

Introduction

In the ever-evolving world of web development, content remains king. For sites heavy with documentation, blogs, guides, changelogs, or engineering wikis, Markdown has emerged as the go-to language for crafting readable, maintainable content. However, the standard Markdown might not always fit the bill, especially when you're looking to add a unique touch or specific functionality to your Svelte-powered websites. Enter mdsvex - a Svelte preprocessor that not only understands Markdown but extends its capabilities, allowing developers to introduce custom-flavored Markdown.

What is mdsvex?

mdsvex stands for "Markdown for Svelte", a clever play on words combining 'md' (Markdown) and 'svex' (Svelte + extensions). It's a Svelte preprocessor that enables you to write Svelte components inside your Markdown files. But mdsvex is more than just a bridge between Markdown and Svelte; it's a gateway to customize and supercharge your Markdown to better suit your project's needs.

Key Features of mdsvex:

• Svelte in Markdown: Seamlessly use Svelte components within Markdown.
• Syntax Highlighting: Offers out-of-the-box support for syntax-highlighted code blocks.
• Layout Support: Define layouts for your Markdown content, ensuring consistency across your site.
• Custom Components: Replace standard Markdown elements with custom Svelte components.

Why Customize Markdown in Svelte?

Imagine you're building a technical documentation site. Standard Markdown provides the basics, but what if you want to include interactive examples, custom-styled notes, or warning messages? Or maybe you wish to embed Svelte components directly within your content? Custom flavored Markdown, facilitated by mdsvex, makes all this possible, bridging the gap between static content and dynamic, interactive web experiences.

How to Get Started with mdsvex

Before diving into customization, you need to integrate mdsvex with your Svelte project. Start by installing mdsvex:

npm install -D @sveltejs/mdsvex

Then, configure it in your Svelte config file:

import sveltePreprocess from 'svelte-preprocess';
import mdsvex from '@sveltejs/mdsvex';

export default {
  extensions: ['.svelte', '.svx'],
  preprocess: [
    sveltePreprocess(),
    mdsvex({
      extensions: ['.svx'],
      // Additional mdsvex configuration
    })
  ]
};

Writing Custom Flavored Markdown

Step 1: Understanding the Basics

Your journey begins with understanding how mdsvex processes Markdown files. mdsvex converts Markdown into Svelte components, which means you can directly use Svelte syntax within your Markdown.

Step 2: Introducing Custom Syntax

Suppose you want to add a custom blockquote style for tips or warnings in your documentation. Standard Markdown doesn't support this out of the box, but with mdsvex, you can create a custom solution.

Creating a Custom Remark Plugin

Remark is a Markdown processor used by mdsvex. You can extend its functionality with plugins. For example, to create a custom blockquote, write a plugin that processes a specific syntax (like :>TIP, :>WARNING, :>IMPORTANT, :>CAUTION, and :>NOTE.):

import { visit } from 'unist-util-visit';

const blockquoteTypes = {
    ':>TIP': 'tip-blockquote',
    ':>WARNING': 'warning-blockquote',
    ':>IMPORTANT': 'important-blockquote',
    ':>CAUTION': 'caution-blockquote',
    ':>NOTE': 'note-blockquote',
    // ... other types
};

function customBlockquotes() {
  return (tree) => {
    visit(tree, 'text', (node) => {
      const type = Object.keys(blockquoteTypes).find(key => node.value.startsWith(key));
      if (type) {
        // Logic to transform the node
      }
    });
  };
}

export default customBlockquotes;

Step 3: Configuring mdsvex to Use the Plugin

Once your plugin is ready, integrate it into your mdsvex configuration:

import customBlockquotes from './customBlockquotes';

mdsvex({
  remarkPlugins: [customBlockquotes],
  // ...other configurations
});

Step 4: Styling Your Custom Markdown

The final step is styling. Once mdsvex processes your custom Markdown syntax, you need to style it accordingly in your Svelte components or global CSS. You can take some inspiration for designs from GitHub flavored markdown. For example:

.note-blockquote {
    border-left: 4px solid #0078d4; /* Blue left border */
    padding: 1em;
    position: relative;
}

.tip-blockquote {
    border-left: 4px solid #107c10; /* Green left border */
    padding: 1em;
    position: relative;
}

.important-blockquote {
    border-left: 4px solid #8250df; /* Red left border */
    padding: 1em;
    position: relative;
}

.warning-blockquote {
    border-left: 4px solid #ffc83d; /* Yellow left border */
    padding: 1em;
    position: relative;
    border-radius: 0px 12px 12px 0px;
}

.caution-blockquote {
    border-left: 4px solid #d13438; /* Dark red left border */
    padding: 1em;
    position: relative;
    border-radius: 0px 12px 12px 0px;
}

/* Common styles for icons */

.note-blockquote::before {
    content: '\24D8 \0020 \0020 \0020 Note';
    color: #0078d4; /* Blue icon */
}

.tip-blockquote::before {
    content: '\1F4A1 \0020 \0020 \0020 Tip';
    color: #107c10; /* Green icon */
}

.important-blockquote::before {
    content: '\272E \0020 \0020 \0020 Important';
    color: #8250df; /* Red icon */
}

.warning-blockquote::before {
    content: '\26A0 \0020 \0020 \0020 Warning';
    color: #ffc83d; /* Yellow icon */
}

.caution-blockquote::before {
    content: '\1F6D1 \0020 \0020 \0020 Caution';
    color: #d13438; /* Dark red icon */
}

It would look something like this =>

Use these classes to visually distinguish different types of information in your Markdown.

Wrapping Up

mdsvex not only extends the functionality of Markdown in Svelte but also provides a canvas for creative expression. By introducing custom flavors like TIP, WARNING, and IMPORTANT, you can make your content not just informative, but also engaging and intuitive.

In the realm of web development, where content and user experience go hand in hand, mdsvex stands as a tool that brings both to new heights. Whether you're building a technical documentation site, a tutorial blog, or an internal wiki, mdsvex empowers you to craft content that resonates with your audience. Let your creativity flow, and redefine the boundaries of Markdown with mdsvex in Svelte.

Comments

[Shivam Meena]

npm install -D @sveltejs/mdsvex
Is not a valid package. Please always go through official docs.