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 |