Supporting a subset of markdown syntax?

[khromov]

Hi! I would like to support a subset of markdown syntax: Only bold, cursive, strikethrough and automatic links (so https://google.com becomes https://google.com). I don't understand how I can do that with this package.

I found the documentation for writing custom elements here: https://ssssota.github.io/svelte-exmarkdown/docs/03-override-component.

However it is not clear how to override links. I mean both links like [Duck Duck Go](https://duckduckgo.com) and also automatically convert URL in normal text to link. There is also no list of the default renderers which would be useful to see. Perhaps something like that could be added to the documentation? 🙏

Lastly, I would like to know how to configure bundle splitting in an efficient way, as I would like to not bundle all the default renderers in my application as they are not used.

Thank you!

[ssssota]

Thank you for your question!

I'm sorry, but I can't answer you right now. I would like to confirm a few things, so I will answer a little at a time once I have done so.

[ssssota]

First, let's talk about auto-links.

You can also create your own plugin:

// ref. https://github.com/remarkjs/remark-gfm/blob/2d4c9569158afc66dcf1e51ca7d43d680a39c6e8/index.js
import {
  gfmAutolinkLiteralFromMarkdown,
  gfmAutolinkLiteralToMarkdown,
} from 'mdast-util-gfm-autolink-literal';
import type { Plugin } from 'svelte-exmarkdown';

export const autoLinkPlugin: Plugin = {
  remarkPlugin: function () {
    const data = this.data();
    data['fromMarkdownExtensions'] ??= [];
    data['fromMarkdownExtensions'].push(gfmAutolinkLiteralFromMarkdown);
    data['toMarkdownExtensions'] ??= [];
    data['toMarkdownExtensions'].push(gfmAutolinkLiteralToMarkdown);
  },
};

ref. https://stackblitz.com/edit/svelte-exmarkdown-autolink?file=src%2Fautolink.ts

[ssssota]

Lastly, I would like to know how to configure bundle splitting in an efficient way, as I would like to not bundle all the default renderers in my application as they are not used.

Default renderers are made with <svelte:element /> element. So, I don't think there will affect bundle size.

[ssssota]

I would like to support a subset of markdown syntax: Only bold, cursive, strikethrough

Of course, there is the plugin-based method. But there is also the method using string replacement. You can try it:

const disableMarkdownSyntaxes = (md: string): string => {
  return md
    .replace(/^(\s*)(#+ )/gm, '$1\\$2') // disable heading
    .replace(/^(\s*)(-|=|\+|\*)/gm, '$1\\$2') // disable unordered list, alternative heading and <hr>
    .replace(/^(\s*\d+)(\. )/gm, '$1\\$2') // disable ordered list
    .replace(/^(\s*)(>)/gm, '$1\\$2') // disable blockquote
    .replace(/`/g, '\\`') // disable code (block and inline)
    .replace(/!\[/g, '!\\[') // disable image
}

This code is simplified and may have some bugs.

ref. https://stackblitz.com/edit/svelte-exmarkdown-disable-syntax?file=src%2FApp.svelte

[khromov]

⭐ Thank you so much for the detailed response, it helped me! 🙇