# ngx-numbered-codeblock

**Repository Path**: mirrors_scttcper/ngx-numbered-codeblock

## Basic Information

- **Project Name**: ngx-numbered-codeblock
- **Description**: Prism.js wrapper with built-in line numbers
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2020-08-19
- **Last Updated**: 2026-03-29

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

<div align="center">
  <h1>ngx-numbered-codeblock</h1>
  <br>
  <a href="https://www.npmjs.org/package/@ctrl/ngx-numbered-codeblock">
    <img src="https://badge.fury.io/js/%40ctrl%2Fngx-numbered-codeblock.svg" alt="npm">
  </a> 
  <a href="https://travis-ci.org/scttcper/ngx-numbered-codeblock">
    <img src="https://travis-ci.org/scttcper/ngx-numbered-codeblock.svg?branch=master" alt="travis"></a> 
  <a href="https://codecov.io/github/scttcper/ngx-numbered-codeblock">
    <img src="https://img.shields.io/codecov/c/github/scttcper/ngx-numbered-codeblock.svg" alt="codecov">
  </a>
  <br>
  <br>
</div>

> [Prism.js](https://github.com/PrismJS/prism) wrapper with built-in line numbers

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

## Installation

```sh
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

```ts
// 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
```html
<ngx-numbered-codeblock [code]="code"></ngx-numbered-codeblock>
```

Import a [theme](https://github.com/PrismJS/prism-themes) 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](https://github.com/scttcper) &nbsp;&middot;&nbsp;
> Twitter [@scttcper](https://twitter.com/scttcper)