![pnpm 9.5 Introduces Catalogs: Shareable Dependency Version Specifiers](https://cdn.sanity.io/images/cgdhsj6q/production/c06a5b74512bcc6da29d38cef96a454fa947810d-1024x1024.webp?w=400&fit=max&auto=format)
Security News
pnpm 9.5 Introduces Catalogs: Shareable Dependency Version Specifiers
pnpm 9.5 introduces a Catalogs feature, enabling shareable dependency version specifiers, reducing merge conflicts and improving support for monorepos.
highlight.js
Advanced tools
Package description
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.
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); }); });
PrismJS is another syntax highlighter that is similar to highlight.js. It is known for its lightweight core and extensible plugin system. Unlike highlight.js, PrismJS allows users to extend its functionality with plugins for features like line numbers, show language, and copy to clipboard.
CodeMirror is not just a syntax highlighter but a versatile text editor implemented in JavaScript for the browser. It provides more features than highlight.js, including code editing, real-time collaboration, and linting. However, it is heavier and more complex to integrate.
Ace is an embeddable code editor written in JavaScript, similar to CodeMirror. It offers syntax highlighting as one of its features, along with a range of other editing features. It is more suitable for applications that require a full-fledged editor rather than just syntax highlighting.
Changelog
Version 8.9.1
Some last-minute changes reverted due to strange bug with minified browser build:
Readme
Highlight.js is a syntax highlighter written in JavaScript. It works in the browser as well as on the server. It works with pretty much any markup, doesn’t depend on any framework and has automatic language detection.
The bare minimum for using highlight.js on a web page is linking to the
library along with one of the styles and calling
initHighlightingOnLoad
:
<link rel="stylesheet" href="/path/to/styles/default.css">
<script src="/path/to/highlight.pack.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
This will find and highlight code inside of <pre><code>
tags; it tries
to detect the language automatically. If automatic detection doesn’t
work for you, you can specify the language in the class
attribute:
<pre><code class="html">...</code></pre>
The list of supported language classes is available in the class
reference. Classes can also be prefixed with either language-
or
lang-
.
To disable highlighting altogether use the nohighlight
class:
<pre><code class="nohighlight">...</code></pre>
When you need a bit more control over the initialization of
highlight.js, you can use the highlightBlock
and configure
functions. This allows you to control what to highlight and when.
Here’s an equivalent way to calling initHighlightingOnLoad
using
jQuery:
$(document).ready(function() {
$('pre code').each(function(i, block) {
hljs.highlightBlock(block);
});
});
You can use any tags instead of <pre><code>
to mark up your code. If
you don't use a container that preserve line breaks you will need to
configure highlight.js to use the <br>
tag:
hljs.configure({useBR: true});
$('div.code').each(function(i, block) {
hljs.highlightBlock(block);
});
For other options refer to the documentation for configure
.
You can get highlight.js as a hosted, or custom-build, browser script or as a server module. Right out of the box the browser script supports both AMD and CommonJS, so if you wish you can use RequireJS or Browserify without having to build from source. The server module also works perfectly fine with Browserify, but there is the option to use a build specific to browsers rather than something meant for a server. Head over to the download page for all the options.
Note: the library is not supposed to work straight from the source on GitHub; it requires building. If none of the pre-packaged options work for you refer to the building documentation.
Highlight.js is released under the BSD License. See LICENSE file for details.
The official site for the library is at https://highlightjs.org/.
Further in-depth documentation for the API and other topics is at http://highlightjs.readthedocs.org/.
Authors and contributors are listed in the AUTHORS.en.txt file.
FAQs
Unknown package
The npm package highlight.js receives a total of 5,325,466 weekly downloads. As such, highlight.js popularity was classified as popular.
We found that highlight.js demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 4 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
pnpm 9.5 introduces a Catalogs feature, enabling shareable dependency version specifiers, reducing merge conflicts and improving support for monorepos.
Security News
A threat actor on BreachForums is selling an unverified npm vulnerability for account takeover, but npm has not officially confirmed the existence of this security concern.
Security News
Cyber insurance rates are dropping as the market matures, according to a new report projecting global premiums to reach $43 billion by 2030, driven by international market uptake and growth in the SME sector.