CodeHighlighterCodeHighlighter is an attribute directive to highlight code blocks using PrismJS

CodeHighlighter - 图1

Documentation

PrismJS

  2. npm install prismjs --save
  3.  

Include the javascript and a theme css from Prism. Example for angular.json configuration of a CLI project would be as follows. Refer to the PrismJS documentation for the list of available languages.

  2. "styles": [
  3.     "./node_modules/prism/themes/prism.css",
  4.     //...
  5. ],
  6. "scripts": [
  7.     "node_modules/prismjs/prism.js",
  8.     //...
  9. ]
  10.  

Import

  2. import {CodeHighlighterModule} from 'primeng/codehighlighter';
  3.  

Getting Started

CodeHighlighter is applied to a code element with [pCode] directive. The <code> should have a style class having language- prefix to specify the language to highlight. See Prismjs docs for the list of available languages. An example block with css code would be as follows.

  2. <pre>
  3. <code class="language-css" pCode>
  4. .ui-datatable table {
  5.     border-collapse:collapse;
  6.     width: 100%;
  7.     table-layout: fixed;
  8. }
  9. </code>
  10. </pre>
  11.  

Dependencies

Prismjs

Source

View on GitHub