Skip to Main Content
Password Management Rebase a branch with main

Prism Syntax Highlighter

How to add syntax highlighter and line number to your code display.

Implementation Steps:

 

JavaScript

https://unpkg.com/prismjs/components/prism-core#MIN#.js
https://unpkg.com/prismjs/plugins/autoloader/prism-autoloader#MIN#.js
https://unpkg.com/prismjs/plugins/line-numbers/prism-line-numbers#MIN#.js

CSS

https://unpkg.com/prismjs/themes/prism-okaidia.css
https://unpkg.com/prismjs/plugins/line-numbers/prism-line-numbers.css

Usage

sys.htp.p('<pre class="line-numbers"><code class="language-sql"> ');

sys.htp.p('</code><pre>');