JavaScript: основы, примеры и советы
Code Highlighting with highlight.js
Highlight.js is a JavaScript library that allows you to easily add syntax highlighting to your code snippets on a website. It supports a wide range of programming languages and comes with a default set of styles.
Installation
To install highlight.js, you can include the following script tag in the <head> section of your HTML file:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/highlight.js@10.0.0/styles/default.min.css">
<script src="https://cdn.jsdelivr.net/npm/highlight.js@10.0.0/lib/highlight.min.js"></script>
The styles/default.min.css file contains the default styles for the highlighted code, while the highlight.min.js file contains the core library.
Usage
To highlight your code, you simply need to add the <code> element with the appropriate class for the programming language.
For example, to highlight some Python code, you can use the class python:
<code class="python">
def hello_world():
print("Hello, world!")
hello_world()
</code>
Make sure to enclose your code within the <pre> element for proper formatting.
After including the necessary script and CSS files, you can initialize the code highlighting by adding the following script:
<script>hljs.initHighlightingOnLoad();</script>This will highlight all the code snippets in your page.
Customization
Highlight.js comes with a set of default styles, but you can also customize the look of your highlighted code.
You can either modify the existing styles in styles/default.min.css, or create your own CSS file.
For more advanced customization, you can visit the highlight.js documentation for detailed instructions.