Skip to content

Commit

Permalink
Moved hljs class to <code> from <pre>. (#913)
Browse files Browse the repository at this point in the history
In this change set I am changing the guidance in the README
and in comments to put the class on the correct tag: `<code>`, not `<pre>`.

If you put the `hljs` class on `<pre>`, syntax highlighting
does not use the correct padding.

You can see from the default CSS stylesheet in the highlight.js
repo that the `hljs` tag is expected to be on the `<code>` tag:
https://github.com/highlightjs/highlight.js/blob/84719c17a51d7bb045f2df441b9c00f871f7c063/src/styles/default.css#L17-L25

All the official highlight.js examples have the `hljs` class on `<code>`:
https://highlightjs.org/static/demo/
  • Loading branch information
BMorearty committed Nov 18, 2023
1 parent a2c1f5a commit 91c115d
Show file tree
Hide file tree
Showing 4 changed files with 10 additions and 10 deletions.
6 changes: 3 additions & 3 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -161,7 +161,7 @@ var md = require('markdown-it')({
});
```

Or with full wrapper override (if you need assign class to `<pre>`):
Or with full wrapper override (if you need assign class to `<pre>` or `<code>`):

```js
var hljs = require('highlight.js'); // https://highlightjs.org
Expand All @@ -171,13 +171,13 @@ var md = require('markdown-it')({
highlight: function (str, lang) {
if (lang && hljs.getLanguage(lang)) {
try {
return '<pre class="hljs"><code>' +
return '<pre><code class="hljs">' +
hljs.highlight(str, { language: lang, ignoreIllegals: true }).value +
'</code></pre>';
} catch (__) {}
}

return '<pre class="hljs"><code>' + md.utils.escapeHtml(str) + '</code></pre>';
return '<pre><code class="hljs">' + md.utils.escapeHtml(str) + '</code></pre>';
}
});
```
Expand Down
6 changes: 3 additions & 3 deletions lib/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -197,7 +197,7 @@ function normalizeLinkText(url) {
* });
* ```
*
* Or with full wrapper override (if you need assign class to `<pre>`):
* Or with full wrapper override (if you need assign class to `<pre>` or `<code>`):
*
* ```javascript
* var hljs = require('highlight.js') // https://highlightjs.org/
Expand All @@ -207,13 +207,13 @@ function normalizeLinkText(url) {
* highlight: function (str, lang) {
* if (lang && hljs.getLanguage(lang)) {
* try {
* return '<pre class="hljs"><code>' +
* return '<pre><code class="hljs">' +
* hljs.highlight(str, { language: lang, ignoreIllegals: true }).value +
* '</code></pre>';
* } catch (__) {}
* }
*
* return '<pre class="hljs"><code>' + md.utils.escapeHtml(str) + '</code></pre>';
* return '<pre><code class="hljs">' + md.utils.escapeHtml(str) + '</code></pre>';
* }
* });
* ```
Expand Down
6 changes: 3 additions & 3 deletions support/api_header.md
Original file line number Diff line number Diff line change
Expand Up @@ -126,7 +126,7 @@ var md = require('markdown-it')({
});
```

Or with full wrapper override (if you need assign class to `<pre>`):
Or with full wrapper override (if you need assign class to `<pre>` or `<code>`):

```js
var hljs = require('highlight.js') // https://highlightjs.org/
Expand All @@ -136,13 +136,13 @@ var md = require('markdown-it')({
highlight: function (str, lang) {
if (lang && hljs.getLanguage(lang)) {
try {
return '<pre class="hljs"><code>' +
return '<pre><code class="hljs">' +
hljs.highlight(str, { language: lang, ignoreIllegals: true }).value +
'</code></pre>';
} catch (__) {}
}

return '<pre class="hljs"><code>' + md.utils.escapeHtml(str) + '</code></pre>';
return '<pre><code class="hljs">' + md.utils.escapeHtml(str) + '</code></pre>';
}
});
```
Expand Down
2 changes: 1 addition & 1 deletion support/demo_template/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -107,7 +107,7 @@ defaults.highlight = function (str, lang) {
}
} catch (__) { /**/ }

return '<pre class="hljs"><code>' + esc(str) + '</code></pre>';
return '<pre><code class="hljs">' + esc(str) + '</code></pre>';
};

function setOptionClass(name, val) {
Expand Down

0 comments on commit 91c115d

Please sign in to comment.