Security News
Cloudflare Adds Security.txt Setup Wizard
Cloudflare has launched a setup wizard allowing users to easily create and manage a security.txt file for vulnerability disclosure on their websites.
highlight.js
Advanced tools
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); }); });
Highlight.js highlights syntax in code examples on blogs, forums and, in fact, on any web page. It's very easy to use because it works automatically: finds blocks of code, detects a language, highlights it.
Autodetection can be fine tuned when it fails by itself (see "Heuristics").
The download package includes the file "highlight.pack.js" which is a full compressed version of the library intended for use in production. All uncompressed source files are also available, feel free to look into them!
The script is installed by linking to a single file and making a single initialization call:
<script type="text/javascript" src="highlight.pack.js"></script>
<script type="text/javascript">
hljs.initHighlightingOnLoad();
</script>
Also you can replace TAB ('\x09') characters used for indentation in your code
with some fixed number of spaces or with a <span>
to give them special
styling:
<script type="text/javascript">
hljs.tabReplace = ' '; // 4 spaces
// ... or
hljs.tabReplace = '<span class="indent">\t</span>';
hljs.initHighlightingOnLoad();
</script>
The script looks in your page for fragments <pre><code>...</code></pre>
that are traditionally used to mark up code examples. Their content is
marked up by logical pieces with defined class names.
If you use different markup for code blocks you can initialize them manually
with highlightBlock(code, tabReplace)
function. It takes a DOM element
containing the code to highlight and optionally a string with which to replace
TAB characters.
Initialization using, for example, jQuery might look like this:
$(document).ready(function() {
$('pre code').each(function(i, e) {hljs.highlightBlock(e, ' ')});
});
If your code container relies on <br>
tags instead of line breaks (i.e. if
it's not <pre>
) pass true
into third parameter of highlightBlock
:
$('div.code').each(function(i, e) {hljs.highlightBlock(e, null, true)});
Elements of code marked up with classes can be styled as desired:
.comment {
color: gray;
}
.keyword {
font-weight: bold;
}
.python .string {
color: blue;
}
.html .atribute .value {
color: green;
}
Highlight.js comes with several style themes located in "styles" directory that can be used directly or as a base for your own experiments.
For full reference list of classes see classref.txt.
File export.html contains a little program that allows you to paste in a code snippet and then copy and paste the resulting HTML code generated by the highlighter. This is useful in situations when you can't use the script itself on a site.
Autodetection of a code's language is done using a simple heuristic: the program tries to highlight a fragment with all available languages and counts all syntactic structures that it finds along the way. The language with greatest count wins.
This means that in short fragments the probability of an error is high
(and it really happens sometimes). In this cases you can set the fragment's
language explicitly by assigning a class to the <code>
element:
<pre><code class="html">...</code></pre>
You can use class names recommended in HTML5: "language-html",
"language-php". Classes also can be assigned to the <pre>
element.
To disable highlighting of a fragment altogether use "no-highlight" class:
<pre><code class="no-highlight">...</code></pre>
For the license terms see LICENSE files. For the list of contributors see AUTHORS.en.txt file.
Version 11.0.0
This is a major release. As such it contains breaking changes which may require action from users. Please read VERSION_11_UPGRADE.md for a detailed summary of all breaking changes.
Unless otherwise attributed items below are thanks to [Josh Goebel][] (ref: #2558).
The below list should only be considered to be a high-level summary.
Deprecations / Removals / API Changes:
initHighlighting()
and initHighlightingOnLoad()
deprecated. Use highlightAll()
.highlightBlock(el)
deprecated. Use highlightElement(el)
before:highlightBlock
& after:highlightBlock
callbacks deprecated. Use equivalent highlightElement
callbacks.highlight(languageName, code, ignoreIllegals, continuation)
signature deprecated. Use highlight(code, {language, ignoreIllegals})
.highlight()
signature no longer supports continuation
argument.tabReplace
option removed. Consider a plugin.useBR
option removed. Consider a plugin or CSS.requireLanguage()
removed. Use getLanguage()
.endSameAsBegin
mode key removed. Use hljs.END_SAME_AS_BEGIN
.lexemes
mode key removed. Use keywords.$pattern
.Security:
Themes:
schoolbook
has been updated to remove the lined background.github
updated to better match modern GitHub (#1616) [Jan Pilzer][]github-gist
has been removed in favor of github
[Jan Pilzer][]nnfx
updated for v11 xml styles and improved css supportLanguage Grammars:
Parser:
beginScope
and endScope
to allow separate scoping begin and end (#3159) [Josh Goebel][]endScope
now supports multi-class matchers as well (#3159) [Josh Goebel][]highlightElement
now always tags blocks with a consistent language-[name]
class [Josh Goebel][]
span
tags now also always have the language-
prefix addedtitle.class.inherited
sub-scope support [Josh Goebel][]title.class
sub-scope support (#3078) [Josh Goebel][]title.function
sub-scope support (#3078) [Josh Goebel][]beforeMatch
compiler extension (#3078) [Josh Goebel][]cssSelector
configuration option (#3180) [James Edington][]Grammars:
.meta-keyword
=> .meta .keyword
(nested scopes) (#3167) [Josh Goebel][].meta-string
=> .meta .string
(nested scopes) (#3167) [Josh Goebel][]actor
keyword (#3171) [Bradley Mackey][]@resultBuilder
attribute (#3151) [Bradley Mackey][]pde
alias (#3142) [Dylan McBean][]function.title
=> title.function
(#3078) [Josh Goebel][]function.title
=> title.function
(#3078) [Josh Goebel][]function.title
=> title.function
(#3078) [Josh Goebel][]impl
(#3078) [Josh Goebel][]New Languages:
Theme Improvements:
builtin-name
CSS class (#3119) [Josh Goebel][]New Themes:
Dev Improvements:
FAQs
Syntax highlighting with language autodetection.
The npm package highlight.js receives a total of 6,629,935 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
Cloudflare has launched a setup wizard allowing users to easily create and manage a security.txt file for vulnerability disclosure on their websites.
Security News
The Socket Research team breaks down a malicious npm package targeting the legitimate DOMPurify library. It uses obfuscated code to hide that it is exfiltrating browser and crypto wallet data.
Security News
ENISA’s 2024 report highlights the EU’s top cybersecurity threats, including rising DDoS attacks, ransomware, supply chain vulnerabilities, and weaponized AI.