@ctrl/ngx-numbered-codeblock

ngx-numbered-codeblock

Prism.js wrapper with built-in line numbers

DEMO: https://typectrl.github.io/ngx-numbered-codeblock/

Installation

npm install @ctrl/ngx-numbered-codeblock

Use

Import the module

// Added to NgModule
import { NumberedCodeblockModule } from '@ctrl/ngx-numbered-codeblock';

// Import your required language in main.ts or at the root of your application
import 'prismjs';
// typescript
import 'prismjs/components/prism-typescript';
// javascript
import 'prismjs/components/prism-javascript';

Use The Component

<ngx-numbered-codeblock [code]="code"></ngx-numbered-codeblock>

Import a theme or create your own

Inputs

• code - a formatted string of the code to display
• languague - default: typescript the code parser to use with prismjs
• lineNumbers - default: true if line numbers should be shown

License

MIT

GitHub @scttcper  ·  Twitter @scttcper