@phase2/outline-code-block

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