denoland / deno-gfm

Server-side GitHub Flavored Markdown rendering for Deno
https://jsr.io/@deno/gfm
MIT License
226 stars 37 forks source link

feat: customization of allowedClasses #85

Closed deer closed 10 months ago

deer commented 10 months ago

I was trying to use this with fresh's tailwind plugin, but ran into issues because tailwind expects lists to be like <ul class="list-disc"> which is not what we do here.

Fortunately #80 allows me to define a custom renderer like:

class CustomRenderer extends Renderer {
  list(body: string, ordered: boolean): string {
    const type = ordered ? "list-decimal" : "list-disc";
    const tag = ordered ? "ol" : "ul";
    return `<${tag} class="${type}">${body}</${tag}>`;
  }
}

Cool, but then the classes get purged during sanitization. So this feature allows users to invoke the render function like this:

const html = render(markdown, {
  renderer: new CustomRenderer({}),
  allowedClasses: { ul: ["list-disc"], ol: ["list-decimal"] },
});
deer commented 10 months ago

@marvinhagemeister, what do you think of this approach and this PR? I see you're doing something different on the fresh www site. There you have the css hardcoded in a markdown.css file.