@ctrl/ngx-numbered-codeblock

numbered codeblock and prismjs wrapper for angular

Usage no npm install needed!

<script type="module">
  import ctrlNgxNumberedCodeblock from 'https://cdn.skypack.dev/@ctrl/ngx-numbered-codeblock';
</script>

README

ngx-numbered-codeblock


npm travis codecov

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