Prism.js wrapper with built-in line numbers

DEMO: https://ngx-numbered-codeblock.netlify.com/

Installation

npm install @ctrl/ngx-numbered-codeblock

Dependencies

Latest version available for each version of Angular

| @ctrl/ngx-numbered-codeblock | Angular | | ---------------------------- | ------- | | 2.0.2 | 8.x | | 3.0.1 | 9.x | | current | >= 10 |

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