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.
Note: provided styles work for code defined inside <pre>
blocks. If you use
custom markup you should modify styles accordingly.
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.
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.