I am styling syntax with HighlightJS but I had a problem with space and line-number mismatch.
Problem : If the syntax is not started immediately after <code> it appends a blank line.
It is not possible always to insert syntax this way, I am looking for JavaScript solution, to remove the first blank line only.
This is simple JavaScript HowTo if anyone can mention the solution of this issue - -
I am looking for a JavaScript solution or HighlightJS plugin if any
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Testing HighlightJS</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.6.0/styles/routeros.min.css">
</head>
<body>
<h3>Testing HighlightJS</h3>
<h4>CSS</h4>
<pre><code class="language-css">
.class{
font-size: 0.85rem;
font-weight: 600;
font-family: monospace;
}
h1 .header{
font-size: 1.5rem;;
font-family: Arial;
}
</code></pre>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.6.0/highlight.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.6.0/languages/css.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlightjs-line-numbers.js/2.6.0/highlightjs-line-numbers.min.js"></script>
<script>hljs.highlightAll(); hljs.initLineNumbersOnLoad();</script>
</body>
</html>