feat(highlight): adjust the layout of the highlight code block

[stevenjoezhang]

Current behavior

<tr>
  <td class="gutter"><pre>
    <span class="line">1</span>
    <br>
    <span class="line">2</span>
    <br>
    <span class="line">3</span>
  </pre></td>

  <td class="code"><pre>
    <span class="line">hello, world</pre>
    <br>
    <span class="line">hello, world</span>
    <br>
    <span class="line">hello, world</span>
  </pre></td>
</tr>

New behavior

<tr>
  <td class="gutter"><pre>
    <span class="line">1</span>
  </pre></td>
  <td class="code"><pre>
    <span class="line">hello, world</pre>
  </td>
</tr>

<tr>
  <td class="gutter"><pre>
    <span class="line">2</span>
  </pre></td>
  <td class="code"><pre>
    <span class="line">hello, world</pre>
  </td>
</tr>

<tr>
  <td class="gutter"><pre>
    <span class="line">3</span>
  </pre></td>
  <td class="code"><pre>
    <span class="line">hello, world</pre>
  </td>
</tr>

[coveralls]

Coverage decreased (-0.02%) to 95.364% when pulling a605d94 on stevenjoezhang:master into a1ad13b on hexojs:master.

[SukkaW]

Currently I am working on a new Hexo theme, and highlight style problem just nearly makes me mad. I am sure this PR would help, but I am wonder if this will significantly increase output HTML size.

[SukkaW]

Also, the test case needs to be updated in order to pass the Travis CI test.

[stevenjoezhang]

Travis CI's error report has been fixed.

The main idea of this PR is: it's a bit strange to use <br> inside the <table> element. Use more <tr> elements can make the structure of the table more logical.

[curbengh]

Tested in local machine.

[stevenjoezhang]

@SukkaW @curbengh @jiangtj
Talking about backward compatible, I found that I have made a mistake. This PR might make the empty lines disappear in <table> if highlight.line_number is disabled in _config.yml.

hexo-util/lib/highlight.js

Lines 61 to 72 in e736e1b

	function formatLine(line, lineno, marked, options) {
	const useHljs = options.hljs || false;
	let res = useHljs ? '' : '<span class="line';
	if (marked.includes(lineno)) {
	// Handle marked lines.
	res += useHljs ? `<mark>${line}</mark>` : ` marked">${line}</span>`;
	} else {
	res += useHljs ? line : `">${line}</span>`;
	}
	return res;
	}

And here's the solution - it's necessary to insert a <br> tag if the line is empty.

function formatLine(line, lineno, marked, options) {
+  line = line || '<br>';
  const useHljs = options.hljs || false;
  let res = useHljs ? '' : '<span class="line';
  if (marked.includes(lineno)) {
    // Handle marked lines.
    res += useHljs ? `<mark>${line}</mark>` : ` marked">${line}</span>`;
  } else {
    res += useHljs ? line : `">${line}</span>`;
  }


  return res;
}

[curbengh]

I see, I was wondering why empty line is removed in https://deploy-preview-1241--hexo-site.netlify.com/news/2019/12/09/hexo-4-1-released/ when previewing hexojs/site#1241 . hexo website does disabled line_number.

Please submit a PR.

Need to make sure it's compatible with the following configs:

# Need a unit test for this config in that PR, the rest can test on sample blog
highlight:
  line_number: false
  wrap: true

highlight:
  line_number: false
  wrap: false

# they are decoupled after #138
highlight:
  hljs: false
  wrap: true

highlight:
  hljs: false
  wrap: false