fix(highlight): use <div> when wrap is disabled

lib/highlight.js

@@ -30,7 +30,6 @@ function highlightUtil(str, options = {}) {
   const before = useHljs ? `<pre><code class="${classNames}">` : '<pre>';
   const after = useHljs ? '</code></pre>' : '</pre>';
 
-  const figCaption = caption ? `<figcaption>${caption}</figcaption>` : '';
 
   const lines = data.value.split('\n');
   let numbers = '';
@@ -43,15 +42,21 @@ function highlightUtil(str, options = {}) {
     content += formatLine(line, Number(firstLine) + i, mark, options, wrap);
   }
 
+  let codeCaption = '';
+
+  if (caption) {
+    codeCaption = wrap ? `<figcaption>${caption}</figcaption>` : `<div class="caption">${caption}</div>`;
+  }
+
   if (!wrap) {
     // if original content has one trailing newline, replace it only once, else remove all trailing newlines
     content = /\r?\n$/.test(data.value) ? content.replace(/\n$/, '') : content.trimEnd();
-    return `<pre>${figCaption}<code class="${classNames}">${content}</code></pre>`;
+    return `<pre>${codeCaption}<code class="${classNames}">${content}</code></pre>`;
   }
 
   let result = `<figure class="highlight${data.language ? ` ${data.language}` : ''}">`;
 
-  result += figCaption;
+  result += codeCaption;
 
   result += '<table><tr>';
 

lib/prism.js

@@ -98,7 +98,7 @@ function PrismUtil(str, options = {}) {
 
   if (tab) str = replaceTabs(str, tab);
 
-  const codeCaption = caption ? `<div>${caption}</div>` : '';
+  const codeCaption = caption ? `<div class="caption">${caption}</div>` : '';
 
   const startTag = `<pre class="${preTagClassArr.join(' ')}"${preTagAttr}>${codeCaption}<code class="language-${language}">`;
   const endTag = '</code></pre>';

test/highlight.spec.js

@@ -194,12 +194,13 @@ describe('highlight', () => {
   // it('don\'t highlight if parse failed'); missing-unit-test
 
   it('caption', done => {
+    const caption = 'hello world';
     const result = highlight(testString, {
-      caption: 'hello world'
+      caption
     });
 
     result.should.eql([
-      '<figure class="highlight plain"><figcaption>hello world</figcaption><table><tr>',
+      `<figure class="highlight plain"><figcaption>${caption}</figcaption><table><tr>`,
       gutter(1, 4),
       code(testString),
       end
@@ -208,15 +209,16 @@ describe('highlight', () => {
   });
 
   it('caption (wrap: false)', done => {
+    const caption = 'hello world';
     const result = highlight(testString, {
       gutter: false,
       wrap: false,
-      caption: 'hello world'
+      caption
     });
 
     result.should.eql([
       '<pre>',
-      '<figcaption>hello world</figcaption>',
+      `<div class="caption">${caption}</div>`,
       '<code class="highlight plain">',
       entities.encode(testString),
       '</code></pre>'

test/prism.spec.js

@@ -330,7 +330,7 @@ describe('prismHighlight', () => {
     const caption = 'foo';
     const result = prismHighlight(input, { caption });
 
-    result.should.contains('<div>' + caption + '</div>');
+    result.should.contains('<div class="caption">' + caption + '</div>');
 
     validateHtmlAsync(result, done);
   });