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 | | |