@phase2/outline-code-block NPM

outline-code-block

The OutlineCodeBlock component

Properties

Property	Attribute	Type	Default	Description
`code`	`code`	`string`	"Hello World"	The code snippet to be displayed - default 'Hello World'
`codeSlot`		`HTMLElement`
`formatCode`		`() => string`	"() => {\n if (\n this.language.toLowerCase() === 'jsx' \|\|\n this.language.toLowerCase() === 'html'\n ) {\n return this.innerHTML;\n } else {\n return this.textContent!;\n }\n }"
`language`	`language`	`CodeLanguages`	"typescript"	Language of code block - default 'typescript''css' \| 'graphql' \| 'html' \| 'javascript' \| 'json' \| 'markdown' \| 'reactjsx' \| 'reacttsx' \| 'svg' \| 'typescript' \| 'xml'
`lineNumbers`	`line-numbers`	`boolean`		Whether or not to display the line numbers for code block
`prismCodeLookup`		`() => string`	"() => {\n let prismCode = '';\n\n switch (this.language) {\n case 'css':\n prismCode = Prism.highlight(this.code, Prism.languages.css, 'css');\n break;\n case 'graphql':\n prismCode = Prism.highlight(\n this.code,\n Prism.languages.graphql,\n 'graphql'\n );\n break;\n case 'html':\n prismCode = Prism.highlight(this.code, Prism.languages.html, 'html');\n break;\n case 'javascript':\n prismCode = Prism.highlight(\n this.code,\n Prism.languages.javascript,\n 'javascript'\n );\n break;\n case 'json':\n prismCode = Prism.highlight(this.code, Prism.languages.json, 'json');\n break;\n case 'markdown':\n prismCode = Prism.highlight(\n this.code,\n Prism.languages.markdown,\n 'markdown'\n );\n break;\n case 'jsx':\n prismCode = Prism.highlight(this.code, Prism.languages.jsx, 'jsx');\n break;\n case 'tsx':\n prismCode = Prism.highlight(this.code, Prism.languages.tsx, 'tsx');\n break;\n case 'svg':\n prismCode = Prism.highlight(this.code, Prism.languages.svg, 'svg');\n break;\n case 'typescript':\n prismCode = Prism.highlight(\n this.code,\n Prism.languages.typescript,\n 'typescript'\n );\n break;\n case 'xml':\n prismCode = Prism.highlight(this.code, Prism.languages.xml, 'xml');\n break;\n\n default:\n break;\n }\n return prismCode;\n }"
`template`		`HTMLElement`