npm package: @phase2/outline-code-block
Description: The Outline Components for the web code block component
Author: Phase2 Technology
Latest version: 0.1.5

# outline-code-block

The OutlineCodeBlock component

## Properties

| Property          | Attribute      | Type            | Default                                          | Description                                      |
|-------------------|----------------|-----------------|--------------------------------------------------|--------------------------------------------------|
| `code`            | `code`         | `string`        | "<p>Hello World</p>"                             | The code snippet to be displayed - default '<p>Hello World</p>' |
| `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'<br />'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`   |                                                  |                                                  |