Skip to content

Commit

Permalink
Adjust the layout of the highlight code block
Browse files Browse the repository at this point in the history
  • Loading branch information
@stevenjoezhang
stevenjoezhang committed Nov 15, 2019
1 parent a1ad13b commit 401dde1
Show file tree
Hide file tree
Showing 2 changed files with 48 additions and 86 deletions.
31 changes: 14 additions & 17 deletions lib/highlight.js
View file
Expand Up @@ -32,31 +32,29 @@ function highlightUtil(str, options = {}) {

if (!wrap) return `<pre><code class="${classNames}">${data.value}</code></pre>`;

const lines = data.value.split('\n');
let numbers = '';
let content = '';

for (let i = 0, len = lines.length; i < len; i++) {
let line = lines[i];
if (tab) line = replaceTabs(line, tab);
numbers += `<span class="line">${Number(firstLine) + i}</span><br>`;

This comment has been minimized.

Sign in to view

Copy link
@jiangtj

jiangtj Dec 3, 2019

Member

😢 Number does not seem to render the same effect.

This comment has been minimized.

Sign in to view

Copy link
@stevenjoezhang

stevenjoezhang Dec 4, 2019

Author Member

Test cases?

This comment has been minimized.

Sign in to view

Copy link
@jiangtj

jiangtj Dec 4, 2019

Member

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.

Sign in to view

Copy link
@SukkaW

SukkaW Dec 4, 2019

Member

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.

Sign in to view

Copy link
@jiangtj

jiangtj Dec 4, 2019

Member

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.

Sign in to view

Copy link
@SukkaW

SukkaW Dec 4, 2019 •
edited

Member

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

This comment has been minimized.

Sign in to view

Copy link
@stevenjoezhang

stevenjoezhang Dec 4, 2019 •
edited

Author Member

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
content += formatLine(line, Number(firstLine) + i, mark, options);
}

let result = `<figure class="highlight${data.language ? ` ${data.language}` : ''}">`;

if (caption) {
result += `<figcaption>${caption}</figcaption>`;
}

result += '<table><tr>';
result += '<table>';

if (gutter) {
result += `<td class="gutter"><pre>${numbers}</pre></td>`;
const lines = data.value.split('\n');

for (let i = 0, len = lines.length; i < len; i++) {
let line = lines[i];
if (tab) line = replaceTabs(line, tab);
let content = formatLine(line, Number(firstLine) + i, mark, options);

result += '<tr>';
if (gutter) {
result += `<td class="gutter"><pre><span class="line">${Number(firstLine) + i}</span></pre></td>`;
}
result += `<td class="code">${before}${content}${after}</td></tr>`;
}

result += `<td class="code">${before}${content}${after}</td>`;
result += '</tr></table></figure>';
result += '</table></figure>';

return result;
}
Expand All @@ -71,7 +69,6 @@ function formatLine(line, lineno, marked, options) {
res += useHljs ? line : `">${line}</span>`;
}

res += '<br>';
return res;
}

Expand Down
103 changes: 34 additions & 69 deletions test/highlight.spec.js
View file
Expand Up @@ -13,24 +13,23 @@ const testJson = {

const testString = JSON.stringify(testJson, null, ' ');

const start = '<figure class="highlight plain"><table><tr>';
const end = '</tr></table></figure>';

const gutterStart = '<td class="gutter"><pre>';
const gutterEnd = '</pre></td>';

const codeStart = '<td class="code"><pre>';
const codeEnd = '</pre></td>';

function gutter(start, end) {
let result = gutterStart;
function gutter(start, end, disabled) {
let result = [];

for (let i = start; i <= end; i++) {
result += `<span class="line">${i}</span><br>`;
if (disabled) {
result.push('');
} else {
result.push(gutterStart + `<span class="line">${i}</span>` + gutterEnd);
}
}

result += gutterEnd;

return result;
}

Expand All @@ -47,13 +46,20 @@ function code(str, lang) {

const lines = data.value.split('\n');

return lines.reduce((prev, current) => {
return `${prev}<span class="line">${current}</span><br>`;
}, codeStart) + codeEnd;
return lines.map(current => {
return codeStart + `<span class="line">${current}</span>` + codeEnd;
});
}

function assertResult(result, ...args) {
result.should.eql(start + args.join('') + end);
function assertResult(result, gutter, code, className = 'plain', caption = '') {
const start = `<figure class="highlight ${className}">${caption}<table>`;
const end = '</table></figure>';
let res = start;
for (let i in gutter) {
res += '<tr>' + gutter[i] + code[i] + '</tr>';
}
res += end;
result.should.eql(res);
}

function validateHtmlAsync(str, done) {
Expand Down Expand Up @@ -81,7 +87,7 @@ describe('highlight', () => {

it('gutter: false', done => {
const result = highlight(testString, {gutter: false});
assertResult(result, code(testString));
assertResult(result, gutter(1, 4, true), code(testString));
validateHtmlAsync(result, done);
});

Expand Down Expand Up @@ -141,25 +147,13 @@ describe('highlight', () => {

it('lang = json', done => {
const result = highlight(testString, {lang: 'json'});

result.should.eql([
'<figure class="highlight json"><table><tr>',
gutter(1, 4),
code(testString, 'json'),
end
].join(''));
assertResult(result, gutter(1, 4), code(testString, 'json'), 'json');
validateHtmlAsync(result, done);
});

it('auto detect', done => {
const result = highlight(testString, {autoDetect: true});

result.should.eql([
'<figure class="highlight json"><table><tr>',
gutter(1, 4),
code(testString, 'json'),
end
].join(''));
assertResult(result, gutter(1, 4), code(testString, 'json'), 'json');
validateHtmlAsync(result, done);
});

Expand All @@ -176,12 +170,7 @@ describe('highlight', () => {
caption: 'hello world'
});

result.should.eql([
'<figure class="highlight plain"><figcaption>hello world</figcaption><table><tr>',
gutter(1, 4),
code(testString),
end
].join(''));
assertResult(result, gutter(1, 4), code(testString), 'plain', '<figcaption>hello world</figcaption>');
validateHtmlAsync(result, done);
});

Expand All @@ -194,13 +183,7 @@ describe('highlight', () => {
].join('\n');

const result = highlight(str, {tab: ' ', lang: 'js'});

result.should.eql([
'<figure class="highlight js"><table><tr>',
gutter(1, 4),
code(str.replace(/\t/g, ' '), 'js'),
end
].join(''));
assertResult(result, gutter(1, 4), code(str.replace(/\t/g, ' '), 'js'), 'js');
validateHtmlAsync(result, done);
});

Expand All @@ -221,12 +204,7 @@ describe('highlight', () => {
it('highlight sublanguages', function(done) {
var str = '<node><?php echo "foo"; ?></node>';
var result = highlight(str, {lang: 'xml'});
result.should.eql([
'<figure class="highlight xml"><table><tr>',
gutter(1, 1),
code('<span class="tag">&lt;<span class="name">node</span>&gt;</span><span class="php"><span class="meta">&lt;?php</span> <span class="keyword">echo</span> <span class="string">"foo"</span>; <span class="meta">?&gt;</span></span><span class="tag">&lt;/<span class="name">node</span>&gt;</span>', null),
end
].join(''));
assertResult(result, gutter(1, 1), code('<span class="tag">&lt;<span class="name">node</span>&gt;</span><span class="php"><span class="meta">&lt;?php</span> <span class="keyword">echo</span> <span class="string">"foo"</span>; <span class="meta">?&gt;</span></span><span class="tag">&lt;/<span class="name">node</span>&gt;</span>', null), 'xml');
validateHtmlAsync(result, done);
});

Expand All @@ -239,13 +217,8 @@ describe('highlight', () => {
'`'
].join('\n');

const result = highlight(str, {lang: 'js'});
result.should.eql([
'<figure class="highlight js"><table><tr>',
gutter(1, 5),
code('<span class="keyword">var</span> string = <span class="string">`</span>\n<span class="string"> Multi</span>\n<span class="string"> line</span>\n<span class="string"> string</span>\n<span class="string">`</span>', null),
end
].join(''));
const result = highlight(str, { lang: 'js' });
assertResult(result, gutter(1, 5), code('<span class="keyword">var</span> string = <span class="string">`</span>\n<span class="string"> Multi</span>\n<span class="string"> line</span>\n<span class="string"> string</span>\n<span class="string">`</span>', null), 'js');
validateHtmlAsync(result, done);
});

Expand All @@ -258,13 +231,8 @@ describe('highlight', () => {
'`'
].join('\n');

const result = highlight(str, {lang: 'js'});
result.should.eql([
'<figure class="highlight js"><table><tr>',
gutter(1, 5),
code('<span class="keyword">var</span> string = <span class="string">`</span>\n<span class="string"> Multi</span>\n<span class="string"></span>\n<span class="string"> string</span>\n<span class="string">`</span>', null),
end
].join(''));
const result = highlight(str, { lang: 'js' });
assertResult(result, gutter(1, 5), code('<span class="keyword">var</span> string = <span class="string">`</span>\n<span class="string"> Multi</span>\n<span class="string"></span>\n<span class="string"> string</span>\n<span class="string">`</span>', null), 'js');
validateHtmlAsync(result, done);
});

Expand All @@ -278,13 +246,8 @@ describe('highlight', () => {
'`'
].join('\n');

const result = highlight(str, {autoDetect: true});
result.should.eql([
'<figure class="highlight javascript"><table><tr>',
gutter(1, 6),
code('<span class="meta">"use strict"</span>;\n<span class="keyword">var</span> string = <span class="string">`</span>\n<span class="string"> Multi</span>\n<span class="string"></span>\n<span class="string"> string</span>\n<span class="string">`</span>', null),
end
].join(''));
const result = highlight(str, { autoDetect: true });
assertResult(result, gutter(1, 6), code('<span class="meta">"use strict"</span>;\n<span class="keyword">var</span> string = <span class="string">`</span>\n<span class="string"> Multi</span>\n<span class="string"></span>\n<span class="string"> string</span>\n<span class="string">`</span>', null), 'javascript');
validateHtmlAsync(result, done);
});

Expand Down Expand Up @@ -318,7 +281,9 @@ describe('highlight', () => {
result.should.include(codeStart);
result.should.include('code class="hljs javascript"');
result.should.include('class="hljs-function"');
result.should.include(gutter(1, 5));
gutter(1, 5).every(line => {
result.should.include(line);
});
validateHtmlAsync(result, done);
});

Expand Down

0 comments on commit 401dde1

Please sign in to comment.