Sections and subsections

[AWuhrmann]

Hi, I couldn't get headings with "#" working, is it supported ? I can't find anything on the documentation as well.

[BearToCode]

Did you apply a stylesheet?

[AWuhrmann]

Not directly, but I have tailwindcss activated, and I noticed when I remove it from my app.css, the problem disappear (but tailwind as well...)

[BearToCode]

By default HTML documents have almost no styles attached to them. By using tailwind, even those are removed. You need to use your custom stylesheet to be able to style the resulting HTML. You can use one of the ones mentioned in the link I sent, or make your own.

[Wyrdix]

Don't know if that could be added in the repos but as an example @AWuhrmann what i did on my side is to have a plugin like so :

import type { Plugin } from 'carta-md';
import type { Element, Root } from 'hast';
import { visit } from 'unist-util-visit';

export type TailwindExtensionOptions = {};

function mapper(v: string): string | undefined {
	switch (v) {
		case 'h1':
			return 'h1';
		case 'h2':
			return 'h2';
		case 'h3':
			return 'h3';
		case 'h4':
			return 'h4';
		case 'h5':
			return 'h5';
		case 'h6':
			return 'h6';
		case 'strong':
			return 'font-bold';
		case 'em':
			return 'em';
		case 'ul':
			return 'list-disc list-inside';
		case 'ol':
			return 'list-decimal list-inside';
	}
}

export const tailwind = (options?: TailwindExtensionOptions): Plugin => {
	return {
		transformers: [
			{
				execution: 'sync',
				type: 'rehype',
				transform({ processor }): void {
					processor.use(() => {
						return (tree: Root) => {
							visit(tree, (node, index, parent) => {
								if (node.type !== 'element') return;

								const element = node as Element;
								element.properties.class = mapper(element.tagName);
							});
						};
					});
				}
			}
		]
	};
};