Работа с командой bash read
Code Highlighting with HTML tags using highlight.js
Here is an example of how to add code highlighting to your website using highlight.js. This library provides an easy way to add syntax highlighting to code snippets in various programming languages.
Installation
To get started, include the highlight.js stylesheet and script in the head section of your HTML file. You can find the latest version of highlight.js on the official website or use the CDN links provided above.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Website with Code Highlighting</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.4.1/styles/default.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.4.1/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
</head>
<body>
<h1>Code Highlighting with HTML tags using highlight.js</h1>
<p>
Here is an example of how to add code highlighting to your website using highlight.js. This library provides an easy way to add syntax highlighting to code snippets in various programming languages.
</p>
<h2>Installation</h2>
<p>
To get started, include the highlight.js stylesheet and script in the head section of your HTML file. You can find the latest version of highlight.js on the official website or use the CDN links provided above.
</p>
<pre><code>
// Your code goes here
</code></pre>
</body>
</html>
Usage
After including the necessary files, you can add code snippets to your HTML using the <pre> and <code> tags. Place your code inside the <code> tags and wrap it with the <pre> tags. This will preserve the formatting and indentation of your code.
<pre><code class="language-javascript">
function greet() {
console.log("Hello, world!");
}
greet();
</code></pre>
In the above example, the code snippet is highlighted as JavaScript. You can specify the programming language by adding the class="language-xxxx" attribute to the <code> tag, where "xxxx" is the language code (e.g., "javascript", "python", "css", etc.).
Customization
You can customize the code highlighting theme by modifying the highlight.js stylesheet. There are several pre-defined themes available, or you can create your own custom theme.
With highlight.js, you can easily enhance the visual appearance of code snippets on your website, making them more readable and aesthetically pleasing for your users.