What is highlight.js?
The highlight.js npm package is a syntax highlighter written in JavaScript. It's used to add syntax highlighting to code blocks on web pages, making them more readable and aesthetically pleasing. It supports a wide range of programming languages and is commonly used in blogs, forums, and other platforms where code is shared.
What are highlight.js's main functionalities?
Syntax Highlighting
Automatically detects and highlights syntax in code blocks on a webpage. This is the most basic usage where it applies highlighting to all code blocks.
hljs.highlightAll();
Custom Language Selection
Highlights a specific code element with a specified language. This allows for more control over which elements are highlighted and in what language.
hljs.highlightElement(document.getElementById('my-code'), {language: 'javascript', ignoreIllegals: true});
Custom Themes
Allows the use of custom themes for syntax highlighting. Themes are available as separate CSS files that can be imported to change the appearance of highlighted code.
import 'highlight.js/styles/atom-one-dark.css';
Line Numbers
Adds line numbers to code blocks. This feature is often used in conjunction with syntax highlighting to improve readability and reference specific lines of code.
document.addEventListener('DOMContentLoaded', (event) => { document.querySelectorAll('pre code').forEach((block) => { hljs.lineNumbersBlock(block); }); });
0