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

- BREAKING CHANGE: <figcaption> is replaced with <div> when wrap is disabled
- hexojs#227 (comment)

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,22 @@ function highlightUtil(str, options = {}) {
     content += formatLine(line, Number(firstLine) + i, mark, options, wrap);
   }
 
+  let codeCaption = '';
+
+  if (caption) {
+    if (wrap) codeCaption = `<figcaption>${caption}</figcaption>`;
+    else codeCaption = `<div>${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>';
 

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>${caption}</div>`,
       '<code class="highlight plain">',
       entities.encode(testString),
       '</code></pre>'