Skip to content

Commit 41ebb2d

Browse files
zachleatzachleat
committed
Only wrap lines if line highlighting feature is in play. Breaking change.
1 parent 6c31de7 commit 41ebb2d

16 files changed

+428
-66
lines changed

‎.eleventy.js‎

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,30 +2,34 @@ const Prism = require("prismjs");
22
const hasTemplateFormat = require("./src/hasTemplateFormat");
33
const HighlightPairedShortcode = require("./src/HighlightPairedShortcode");
44
const LiquidHighlightTag = require("./src/LiquidHighlightTag");
5-
const markdownPrismJs = require("./src/markdownSyntaxHighlight");
5+
const markdownPrismJs = require("./src/markdownSyntaxHighlightOptions");
66

77
module.exports = {
88
initArguments: { Prism },
99
configFunction: function(eleventyConfig, options = {}) {
10+
options = Object.assign({ alwaysWrapLineHighlights: false }, options);
11+
1012
// TODO hbs?
1113
if( hasTemplateFormat(options.templateFormats, "liquid") ) {
1214
eleventyConfig.addLiquidTag("highlight", (liquidEngine) => {
1315
// {% highlight js 0 2 %}
1416
let highlight = new LiquidHighlightTag(liquidEngine);
15-
return highlight.getObject();
17+
return highlight.getObject(options);
1618
});
1719
}
1820

1921
if( hasTemplateFormat(options.templateFormats, "njk") ) {
2022
eleventyConfig.addPairedNunjucksShortcode("highlight", (content, args) => {
2123
// {% highlight "js 0 2-3" %}
2224
let [language, ...highlightNumbers] = args.split(" ");
23-
return HighlightPairedShortcode(content, language, highlightNumbers.join(" "));
25+
return HighlightPairedShortcode(content, language, highlightNumbers.join(" "), options);
2426
});
2527
}
2628

2729
if( hasTemplateFormat(options.templateFormats, "md") ) {
28-
eleventyConfig.addMarkdownHighlighter(markdownPrismJs);
30+
eleventyConfig.addMarkdownHighlighter(markdownPrismJs(options));
2931
}
3032
}
3133
};
34+
35+
module.exports.pairedShortcode = HighlightPairedShortcode;

‎demo/eleventy-config.js‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
const syntaxHighlight = require("../.eleventy.js");
2+
3+
console.log( syntaxHighlight.pairedShortcode );
4+
module.exports = function(eleventyConfig) {
5+
eleventyConfig.addPlugin(syntaxHighlight, {
6+
// alwaysWrapLineHighlights: true
7+
});
8+
9+
eleventyConfig.setTemplateFormats("njk,liquid,md,css");
10+
};

‎demo/prism-theme.css‎

Lines changed: 149 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,149 @@
1+
pre {
2+
display: block;
3+
padding: .75rem 1rem;
4+
margin: 1em -1rem 2em -1rem;
5+
line-height: 1.5;
6+
7+
overflow-x: auto;
8+
background-color: #eee;
9+
font-size: 0.875em; /* 14px /16 */
10+
-moz-tab-size: 2;
11+
-o-tab-size: 2;
12+
tab-size: 2;
13+
14+
text-align: left;
15+
white-space: pre;
16+
word-spacing: normal;
17+
word-break: normal;
18+
word-wrap: normal;
19+
20+
background-color: #272822;
21+
color: #fff;
22+
}
23+
24+
25+
/**
26+
* a11y-dark theme for JavaScript, CSS, and HTML
27+
* Based on the okaidia theme: https://github.com/PrismJS/prism/blob/gh-pages/themes/prism-okaidia.css
28+
* @author ericwbailey
29+
*/
30+
31+
/* Inline code */
32+
:not(pre) > code[class*="language-"] {
33+
padding: 0.1em;
34+
border-radius: 0.3em;
35+
white-space: normal;
36+
}
37+
38+
.token.comment,
39+
.token.prolog,
40+
.token.doctype,
41+
.token.cdata {
42+
color: #d4d0ab;
43+
}
44+
45+
.token.punctuation {
46+
color: #fefefe;
47+
}
48+
49+
.token.property,
50+
.token.tag,
51+
.token.constant,
52+
.token.symbol,
53+
.token.deleted {
54+
color: #ffa07a;
55+
}
56+
57+
.token.boolean,
58+
.token.number {
59+
color: #00e0e0;
60+
}
61+
62+
.token.selector,
63+
.token.attr-name,
64+
.token.string,
65+
.token.char,
66+
.token.builtin,
67+
.token.inserted {
68+
color: #abe338;
69+
}
70+
71+
.token.operator,
72+
.token.entity,
73+
.token.url,
74+
.language-css .token.string,
75+
.style .token.string,
76+
.token.variable {
77+
color: #00e0e0;
78+
}
79+
80+
.token.atrule,
81+
.token.attr-value,
82+
.token.function {
83+
color: #ffd700;
84+
}
85+
86+
.token.keyword {
87+
color: #00e0e0;
88+
}
89+
90+
.token.regex,
91+
.token.important {
92+
color: #ffd700;
93+
}
94+
95+
.token.important,
96+
.token.bold {
97+
font-weight: bold;
98+
}
99+
.token.italic {
100+
font-style: italic;
101+
}
102+
103+
.token.entity {
104+
cursor: help;
105+
}
106+
107+
@media screen and (-ms-high-contrast: active) {
108+
code[class*="language-"],
109+
pre[class*="language-"] {
110+
color: windowText;
111+
background: window;
112+
}
113+
114+
:not(pre) > code[class*="language-"],
115+
pre[class*="language-"] {
116+
background: window;
117+
}
118+
119+
.token.important {
120+
background: highlight;
121+
color: window;
122+
font-weight: normal;
123+
}
124+
125+
.token.atrule,
126+
.token.attr-value,
127+
.token.function,
128+
.token.keyword,
129+
.token.operator,
130+
.token.selector {
131+
font-weight: bold;
132+
}
133+
134+
.token.attr-value,
135+
.token.comment,
136+
.token.doctype,
137+
.token.function,
138+
.token.keyword,
139+
.token.operator,
140+
.token.property,
141+
.token.string {
142+
color: highlight;
143+
}
144+
145+
.token.attr-value,
146+
.token.url {
147+
font-weight: normal;
148+
}
149+
}

‎demo/test-liquid.liquid‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title></title>
7+
<link rel="stylesheet" href="../test.css">
8+
<link rel="stylesheet" href="../prism-theme.css">
9+
</head>
10+
<body>
11+
{% highlight js %}
12+
function myFunction() {
13+
return true;
14+
}
15+
{% endhighlight %}
16+
17+
{% highlight js %}
18+
let multilineString = `
19+
this is the first line
20+
this is the middle line
21+
this is the last line
22+
`;
23+
{% endhighlight %}
24+
25+
{% highlight js 1,3 %}
26+
let multilineString = `
27+
this is the first line
28+
this is the middle line
29+
this is the last line
30+
`;
31+
{% endhighlight %}
32+
</body>
33+
</html>

‎demo/test-markdown.md‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
<html lang="en">
2+
<head>
3+
<meta charset="utf-8">
4+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
5+
<title></title>
6+
<link rel="stylesheet" href="../test.css">
7+
<link rel="stylesheet" href="../prism-theme.css">
8+
</head>
9+
<body>
10+
11+
```js
12+
function myFunction() {
13+
return true;
14+
}
15+
```
16+
17+
```js
18+
let multilineString = `
19+
this is the first line
20+
this is the middle line
21+
this is the last line
22+
`;
23+
```
24+
25+
## Dash line
26+
27+
```js/-
28+
let multilineString = `
29+
this is the first line
30+
this is the middle line
31+
this is the last line
32+
`;
33+
```
34+
35+
```js/1,3
36+
let multilineString = `
37+
this is the first line
38+
this is the middle line
39+
this is the last line
40+
`;
41+
```
42+
43+
</body>
44+
</html>

‎demo/test-nunjucks.njk‎

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title></title>
7+
<link rel="stylesheet" href="../test.css">
8+
<link rel="stylesheet" href="../prism-theme.css">
9+
</head>
10+
<body>
11+
12+
{% highlight "js" %}
13+
function myFunction() {
14+
return true;
15+
}
16+
{% endhighlight %}
17+
18+
{% highlight "js" %}
19+
let multilineString = `
20+
this is the first line
21+
this is the middle line
22+
this is the last line
23+
`;
24+
{% endhighlight %}
25+
26+
{% highlight "js 1,3" %}
27+
let multilineString = `
28+
this is the first line
29+
this is the middle line
30+
this is the last line
31+
`;
32+
{% endhighlight %}
33+
34+
{% highlight "js 1,3" %}
35+
alert("test");
36+
37+
let multilineString = buildSchema(`
38+
this is the first line
39+
this is the middle line
40+
this is the last line
41+
`);
42+
43+
alert("test");
44+
{% endhighlight %}
45+
46+
{% highlight "js" %}
47+
module.exports = function({collections}) {
48+
return `<ul>
49+
${collections.post.map((post) => `<li>${ post.data.title }</li>`).join("\n")}
50+
</ul>`;
51+
};
52+
{% endhighlight %}
53+
54+
{% highlight "js 1,3" %}
55+
module.exports = function({collections}) {
56+
return `<ul>
57+
${collections.post.map((post) => `<li>${ post.data.title }</li>`).join("\n")}
58+
</ul>`;
59+
};
60+
{% endhighlight %}
61+
</body>
62+
</html>

‎demo/test.css‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
.highlight-line {
2+
display: inline-block;
3+
4+
/* del, ins, mark default styles */
5+
text-decoration: none;
6+
color: inherit;
7+
}
8+
9+
/* allow highlighting empty lines */
10+
.highlight-line:empty:before {
11+
content: " ";
12+
}
13+
14+
.highlight-line:not(:last-child) {
15+
min-width: 100%;
16+
}
17+
.highlight-line .highlight-line:not(:last-child) {
18+
min-width: 0;
19+
}

‎package.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,8 @@
44
"description": "A pack of Eleventy plugins for syntax highlighting for Markdown and Liquid templates.",
55
"main": ".eleventy.js",
66
"scripts": {
7-
"test": "npx ava"
7+
"test": "npx ava",
8+
"demo": "npx @11ty/eleventy --input=demo --output=demo/_site --config=demo/eleventy-config.js"
89
},
910
"repository": {
1011
"type": "git",

‎src/HighlightLinesGroup.js‎

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -27,15 +27,21 @@ class HighlightLinesGroup {
2727
return this.highlightsRemove.isHighlighted(lineNumber);
2828
}
2929

30-
splitLineMarkup(line, before, after) {
30+
hasTagMismatch(line) {
3131
let startCount = line.split("<span").length;
3232
let endCount = line.split("</span").length;
33+
if( startCount !== endCount ) {
34+
return true;
35+
}
36+
37+
return false;
38+
}
39+
40+
splitLineMarkup(line, before, after) {
3341

3442
// skip line highlighting if there is an uneven number of <span> or </span> on the line.
3543
// for example, we can’t wrap <span> with <span><span></span>
36-
if( startCount > endCount ) {
37-
return line;
38-
} else if( endCount > startCount ) {
44+
if(this.hasTagMismatch(line)) {
3945
return line;
4046
}
4147

0 commit comments

Comments
 (0)