ngx-numbered-codeblock

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