Press n or j to go to the next uncovered block, b, p or k for the previous block.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 | 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 7x 1x 1x 1x 1x 8x 1x 2x 2x 2x 2x 1x 8x 1x 1x | import { MarkdownIt } from "markdown-it"; import { TypographySize } from "@microsoft/fast-components-react-base"; import { HeadingSize, HeadingTag } from "@microsoft/fast-components-react-msft"; import CreateRule from "./rule"; enum ComponentType { heading = "heading", hyperlink = "hyperlink", list = "list", paragraph = "paragraph", } export interface Tokens<T> extends Array<T> { [idx: number]: T; } export interface Token { children: Tokens<Token>; tag: string; content: string; info: string; type: string; attrs: string[][]; attrPush: (attributes: string[]) => void; } class FastMarkdownIt { constructor(md: MarkdownIt) { md.core.ruler.push("fast", new CreateRule(md) as any); md.renderer.rules.paragraph_open = function (): string { return `<Typography size={${TypographySize._7}}>`; }; md.renderer.rules.heading_open = function ( tokens: Tokens<Token>, idx: number ): string { const id: string = tokens[idx + 1].children[0].content .toLowerCase() .replace(/\s/g, "-") .replace(/[^a-z\-]/g, ""); return `<Heading id="${id}" tag="${HeadingTag[tokens[idx].tag]}" size={${ HeadingSize[ "_" + (parseInt(tokens[idx].tag.charAt(1), 10) + 2).toString() ] }}>`; }; md.renderer.rules.text = (tokens: Tokens<Token>, idx: number): string => { return this.replaceSpecialCharacters(tokens[idx].content); }; md.renderer.rules.fence = function (tokens: Tokens<Token>, idx: number): string { let codeSnippet: string = `<pre${ tokens[idx].info ? ` className="language-${tokens[idx].info}"` : "" }><code>`; codeSnippet += `{${JSON.stringify(tokens[idx].content, null, 2)}}`; codeSnippet += `</code></pre>`; return codeSnippet; }; } /** * Due to special characters such as {, }, < and > being interpreted by React * as meaningful characters, these are replaced with the HTML code versions */ private replaceSpecialCharacters = (content: string): string => { return content .replace(/{/g, "{") .replace(/}/g, "}") .replace(/</g, "<") .replace(/>/g, ">"); }; } function plugin(md: MarkdownIt): void { const fastMarkdownIt: FastMarkdownIt = new FastMarkdownIt(md); } export default plugin; |