Browse Source

Moved `hljs` class to `<code>` from `<pre>`. (#913)

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:
84719c17a5/src/styles/default.css (L17-L25)

All the official highlight.js examples have the `hljs` class on `<code>`:
https://highlightjs.org/static/demo/
pull/972/head
Brian Morearty 1 year ago
committed by GitHub
parent
commit
91c115d87b
No known key found for this signature in database GPG Key ID: 4AEE18F83AFDEB23
  1. 6
      README.md
  2. 6
      lib/index.js
  3. 6
      support/api_header.md
  4. 2
      support/demo_template/index.js

6
README.md

@ -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
@ -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>';
}
});
```

6
lib/index.js

@ -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/
@ -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>';
* }
* });
* ```

6
support/api_header.md

@ -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/
@ -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>';
}
});
```

2
support/demo_template/index.js

@ -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) {

Loading…
Cancel
Save