Download for your platform:
+ +Or check Releases for stable versions
+
+ A live preview markdown editor with HTML support
+ Beta +Other platforms:
+ +
+ Download for your platform:
+ +Or check Releases for stable versions
+
+ A live preview markdown editor with HTML support
+ Beta +Other platforms:
+ +
+ {children}
+}
+
+// Generate TOC from markdown
+const generateTOC = (markdown) => {
+ const headings = []
+ const lines = markdown.split('\n')
+
+ lines.forEach((line) => {
+ const match = line.match(/^(#{1,6})\s+(.+)$/)
+ if (match) {
+ const level = match[1].length
+ const text = match[2]
+ const id = text.toLowerCase().replace(/[^\w]+/g, '-')
+ headings.push({ level, text, id })
+ }
+ })
+
+ return headings
+}
+
+export default ({ markdown, allowHtml, showToc }) => {
+ const toc = useMemo(() => generateTOC(markdown), [markdown])
+
+ // Create a permissive schema that allows more HTML but still blocks scripts
+ const permissiveSchema = {
+ ...defaultSchema,
+ attributes: {
+ ...defaultSchema.attributes,
+ '*': [...(defaultSchema.attributes['*'] || []), 'className', 'style', 'id'],
+ svg: ['xmlns', 'viewBox', 'width', 'height', 'style'],
+ path: ['d', 'fill', 'stroke', 'strokeWidth'],
+ g: ['transform', 'fill', 'stroke'],
+ rect: ['x', 'y', 'width', 'height', 'fill', 'stroke', 'rx', 'ry'],
+ circle: ['cx', 'cy', 'r', 'fill', 'stroke'],
+ text: ['x', 'y', 'fill', 'fontSize', 'textAnchor']
+ },
+ tagNames: [
+ ...(defaultSchema.tagNames || []),
+ 'div', 'span', 'img', 'table', 'thead', 'tbody', 'tr', 'th', 'td',
+ 'ul', 'ol', 'li', 'p', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6',
+ 'blockquote', 'pre', 'code', 'em', 'strong', 'a', 'br', 'hr',
+ 'svg', 'path', 'g', 'rect', 'circle', 'text', 'line', 'polyline', 'polygon'
+ ]
+ }
+
+ const rehypePlugins = allowHtml
+ ? [rehypeRaw, rehypeKatex, [rehypeSanitize, permissiveSchema]]
+ : [rehypeKatex, rehypeSanitize]
+
+ const components = {
+ code: CodeComponent
+ }
+
+ return (
+