Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 3 commits into from Nov 17, 2019

Conversation

@stevenjoezhang
Copy link
Contributor

stevenjoezhang commented Nov 15, 2019

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

This comment has been minimized.

Copy link

coveralls commented Nov 15, 2019

Coverage Status

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

@stevenjoezhang stevenjoezhang changed the title Adjust the layout of the highlight code block feat(highlight): adjust the layout of the highlight code block Nov 15, 2019
@SukkaW

This comment has been minimized.

Copy link
Member

SukkaW commented Nov 15, 2019

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

This comment has been minimized.

Copy link
Member

SukkaW commented Nov 15, 2019

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

@stevenjoezhang

This comment has been minimized.

Copy link
Contributor Author

stevenjoezhang commented Nov 16, 2019

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.

@SukkaW
SukkaW approved these changes Nov 16, 2019
Copy link
Contributor

curbengh left a comment

Tested in local machine.

@curbengh curbengh merged commit b201c8e into hexojs:master Nov 17, 2019
2 of 3 checks passed
2 of 3 checks passed
coverage/coveralls Coverage decreased (-0.02%) to 95.364%
Details
Travis CI - Pull Request Build Passed
Details
continuous-integration/appveyor/pr AppVeyor build succeeded
Details
@jiangtj

This comment has been minimized.

Copy link

jiangtj commented on lib/highlight.js in 401dde1 Dec 3, 2019

😢 Number does not seem to render the same effect.

This comment has been minimized.

Copy link
Contributor Author

stevenjoezhang replied Dec 4, 2019

Test cases?

This comment has been minimized.

Copy link

jiangtj replied Dec 4, 2019

1.5.0 Single line, and divided into gutter and code
image
image

1.6.0 Split into multiple lines, each line is split into gutter and code
image
image

This comment has been minimized.

Copy link
Member

SukkaW replied Dec 4, 2019

I don't know if it will break current theme behavior. If it is a Breaking Changes, we should make sure it is backward compatible.

This comment has been minimized.

Copy link

jiangtj replied Dec 4, 2019

1.5.0 result
image
1.6.0 result
image

I found the problem while modifying the md renderer, but I was curious, this didn't seem to affect the filters in hexo

This comment has been minimized.

Copy link
Member

SukkaW replied Dec 4, 2019

@jiangtj PR is welcome to fix multi <pre> behavior for backward compatiblity.

This comment has been minimized.

Copy link
Contributor Author

stevenjoezhang replied Dec 4, 2019

Everything is normal in theme NexT. Maybe you should consider modifying some styles in yout theme cake.

For example, you should not add padding to every pre:
https://github.com/jiangtj/hexo-theme-cake/blob/e9085bd48dd111fbf34e547a7e300680f7a44d6f/source/css/_common/components/highlight/highlight.styl#L51

@stevenjoezhang

This comment has been minimized.

Copy link
Contributor Author

stevenjoezhang commented Dec 9, 2019

@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.

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

This comment has been minimized.

Copy link
Contributor

curbengh commented Dec 9, 2019

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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
5 participants
You can’t perform that action at this time.