From 91c115d87b2dad95036b9ff7a7f961fc162b2128 Mon Sep 17 00:00:00 2001
From: Brian Morearty <brian@morearty.org>
Date: Sat, 18 Nov 2023 06:05:29 -0800
Subject: [PATCH] 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:
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/
---
 README.md                      | 6 +++---
 lib/index.js                   | 6 +++---
 support/api_header.md          | 6 +++---
 support/demo_template/index.js | 2 +-
 4 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/README.md b/README.md
index 4bede02..46e7aff 100644
--- a/README.md
+++ b/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>';
   }
 });
 ```
diff --git a/lib/index.js b/lib/index.js
index afec8d8..6c482b4 100644
--- a/lib/index.js
+++ b/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>';
  *   }
  * });
  * ```
diff --git a/support/api_header.md b/support/api_header.md
index 6e1fb73..92e2cc1 100644
--- a/support/api_header.md
+++ b/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>';
   }
 });
 ```
diff --git a/support/demo_template/index.js b/support/demo_template/index.js
index 8ecc764..f8340f1 100644
--- a/support/demo_template/index.js
+++ b/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) {