Security News
ESLint is Now Language-Agnostic: Linting JSON, Markdown, and Beyond
ESLint has added JSON and Markdown linting support with new officially-supported plugins, expanding its versatility beyond JavaScript.
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 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.
Version 8.8.0
New languages:
Notable fixes and improvements to existing languages:
async
and await
to PythonOther notable changes:
New languages:
New styles:
Notable fixes and improvements to existing languages:
New languages:
New styles:
Notable fixes and improvements to existing languages:
async
keyword from ES6/7 is now supportedNew languages:
New styles:
Notable fixes and improvements to existing languages:
def foo, do: ...
now work in Elixir.<script>
tag now allows any language, not just JavaScript.We've got the new [demo page][]! The obvious new feature is the new look, but apart from that it's got smarter: by presenting languages in groups it avoids running 10000 highlighting attempts after first load which was slowing it down and giving bad overall impression. It is now also being generated from test code snippets so the authors of new languages don't have to update both tests and the demo page with the same thing.
Other notable changes:
template_comment
class is gone in favor of the more general comment
.New languages:
We streamlined our tool chain, it is now based entirely on node.js instead of being a mix of node.js, Python and Java. The build script options and arguments remained the same, and we've noted all the changes in the [documentation][b]. Apart from reducing complexity, the new build script is also faster from not having to start Java machine repeatedly. The credits for the work go to [Jeremy Hull][].
Some notable fixes:
throw
keyword is no longer detected as a method name in Java.New languages in this release:
We've finally got [real tests][test] and [continuous testing on Travis][ci] thanks to [Jeremy Hull][] and [Chris Eidhof][]. The tests designed to cover everything: language detection, correct parsing of individual language features and various special cases. This is a very important change that gives us confidence in extending language definitions and refactoring library core.
We're going to redesign the old [demo/test suite][demo] into an interactive demo web app. If you're confident front-end developer or designer and want to help us with it, drop a comment into [the issue][#542] on GitHub.
As usually there's a handful of new languages in this release:
Other improvements:
New languages:
New styles:
Other improvements:
listLanguages()
][ll] method in the API.lang-
prefix for language names in HTML classes supported
alongside language-
. Thanks to [Jeff Escalante][].This new major release is quite a big overhaul bringing both new features and some backwards incompatible changes. However, chances are that the majority of users won't be affected by the latter: the basic scenario described in the README is left intact.
Here's what did change in an incompatible way:
We're now prefixing all classes located in [CSS classes reference][cr] with
hljs-
, by default, because some class names would collide with other
people's stylesheets. If you were using an older version, you might still want
the previous behavior, but still want to upgrade. To suppress this new
behavior, you would initialize like so:
<script type="text/javascript">
hljs.configure({classPrefix: ''});
hljs.initHighlightingOnLoad();
</script>
tabReplace
and useBR
that were used in different places are also unified
into the global options object and are to be set using configure(options)
.
This function is documented in our [API docs][]. Also note that these
parameters are gone from highlightBlock
and fixMarkup
which are now also
rely on configure
.
We removed public-facing (though undocumented) object hljs.LANGUAGES
which
was used to register languages with the library in favor of two new methods:
registerLanguage
and getLanguage
. Both are documented in our [API docs][].
Result returned from highlight
and highlightAuto
no longer contains two
separate attributes contributing to relevance score, relevance
and
keyword_count
. They are now unified in relevance
.
Another technically compatible change that nonetheless might need attention:
require('highlight.js')
works as before. This is contributed by [Dmitry Smolin][].New features:
Languages now can be recognized by multiple names like "js" for JavaScript or "html" for, well, HTML (which earlier insisted on calling it "xml"). These aliases can be specified in the class attribute of the code container in your HTML as well as in various API calls. For now there are only a few very common aliases but we'll expand it in the future. All of them are listed in the [class reference][cr].
Language detection can now be restricted to a subset of languages relevant in
a given context — a web page or even a single highlighting call. This is
especially useful for node.js build that includes all the known languages.
Another example is a StackOverflow-style site where users specify languages
as tags rather than in the markdown-formatted code snippets. This is
documented in the [API reference][] (see methods highlightAuto
and
configure
).
Language definition syntax streamlined with [variants][] and [beginKeywords][].
New languages and styles:
Miscellaneous improvements:
=>
prompts in Clojure.A catch-up release dealing with some of the accumulated contributions. This one is probably will be the last before the 8.0 which will be slightly backwards incompatible regarding some advanced use-cases.
One outstanding change in this version is the addition of 6 languages to the [hosted script][d]: Markdown, ObjectiveC, CoffeeScript, Apache, Nginx and Makefile. It now weighs about 6K more but we're going to keep it under 30K.
New languages:
Improvements:
?A
, ?1
, ?\012
etc. and %r{..}
regexps.(($filter "myCount") (arr 1 2 3 4 5))
.The latest long period of almost complete inactivity in the project coincided with growing interest to it led to a decision that now seems completely obvious: we need more core developers.
So without further ado let me welcome to the core team two long-time contributors: [Jeremy Hull][] and [Oleg Efimov][].
Hope now we'll be able to work through stuff faster!
P.S. The historical commit is [here][1] for the record.
This long overdue version is a snapshot of the current source tree with all the changes that happened during the past year. Sorry for taking so long!
Along with the changes in code highlight.js has finally got its new home at http://highlightjs.org/, moving from its cradle on Software Maniacs which it outgrew a long time ago. Be sure to report any bugs about the site to mailto:info@highlightjs.org.
On to what's new…
New languages:
New style themes:
Other notable changes:
Since this version highlight.js no longer works in IE version 8 and older. It's made it possible to reduce the library size and dramatically improve code readability and made it easier to maintain. Time to go forward!
New languages: AppleScript (by [Nathan Grigg][ng] and [Dr. Drang][dd]) and Brainfuck (by [Evgeny Stepanischev][bolk]).
Improvements to existing languages:
>>>
and ...
)Also Oleg Efimov did a great job of moving all the docs for language and style developers and contributors from the old wiki under the source code in the "docs" directory. Now these docs are nicely presented at http://highlightjs.readthedocs.org/.
A regular bug-fix release without any significant new features. Enjoy!
A Summer crop:
The reason for the new major version update is a global change of keyword syntax which resulted in the library getting smaller once again. For example, the hosted build is 2K less than at the previous version while supporting two new languages.
Notable changes:
The library now works not only in a browser but also with [node.js][]. It is
installable with npm install highlight.js
. [API][] docs are available on our
wiki.
The new unique feature (apparently) among syntax highlighters is highlighting HTTP headers and an arbitrary language in the request body. The most useful languages here are XML and JSON both of which highlight.js does support. Here's [the detailed post][p] about the feature.
Two new style themes: a dark "south" [Pojoaque][] by Jason Tate and an emulation ofXCode IDE by [Angel Olloqui][ao].
Three new languages: D by [Aleksandar Ružičić][ar], R by [Joe Cheng][jc] and GLSL by [Sergey Tikhomirov][st].
Nginx syntax has become a million times smaller and more universal thanks to remaking it in a more generic manner that doesn't require listing all the directives in the known universe.
Function titles are now highlighted in PHP.
Haskell and VHDL were significantly reworked to be more rich and correct by their respective maintainers [Jeremy Hull][sr] and [Igor Kalnitsky][ik].
And last but not least, many bugs have been fixed around correctness and language detection.
Overall highlight.js currently supports 51 languages and 20 style themes.
A lot of things happened in highlight.js since the last version! We've got nine new contributors, the discussion group came alive, and the main branch on GitHub now counts more than 350 followers. Here are most significant results coming from all this activity:
5 (five!) new languages: Rust, ActionScript, CoffeeScript, MatLab and experimental support for markdown. Thanks go to [Andrey Vlasovskikh][av], [Alexander Myadzel][am], [Dmytrii Nagirniak][dn], [Oleg Efimov][oe], [Denis Bardadym][db] and [John Crepezzi][jc].
2 new style themes: Monokai by [Luigi Maselli][lm] and stylistic imitation of another well-known highlighter Google Code Prettify by [Aahan Krish][ak].
A vast number of [correctness fixes and code refactorings][log], mostly made by [Oleg Efimov][oe] and [Evgeny Stepanischev][es].
[Jeremy Hull][jh] has implemented my dream feature — a port of [Solarized][] style theme famous for being based on the intricate color theory to achieve correct contrast and color perception. It is now available for highlight.js in both variants — light and dark.
This version also adds a new original style Arta. Its author pumbur maintains a [heavily modified fork of highlight.js][pb] on GitHub.
New major version of the highlighter has been built on a significantly refactored syntax. Due to this it's even smaller than the previous one while supporting more languages!
New languages are:
Also this version is marginally faster and fixes a number of small long-standing bugs.
Developer overview of the new language syntax is available in a [blog post about recent beta release][beta].
P.S. New version is not yet available on a Yandex CDN, so for now you have to download [your own copy][d].
FAQs
Syntax highlighting with language autodetection.
The npm package highlight.js receives a total of 6,482,218 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
ESLint has added JSON and Markdown linting support with new officially-supported plugins, expanding its versatility beyond JavaScript.
Security News
Members Hub is conducting large-scale campaigns to artificially boost Discord server metrics, undermining community trust and platform integrity.
Security News
NIST has failed to meet its self-imposed deadline of clearing the NVD's backlog by the end of the fiscal year. Meanwhile, CVE's awaiting analysis have increased by 33% since June.