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