tarasis
/
eleventy-plugin-syntaxhighlighting-chroma
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Added .liquid file/tags support

This commit is contained in:
Robert McGovern 2023-02-03 02:32:52 +00:00
parent 91e57182f3
commit 53be570c16
4 changed files with 39 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
.eleventy.js
View File

@ -21,9 +21,9 @@ module.exports = {
theme: "onedark", theme: "onedark",
lineNumbers: false, lineNumbers: false,
/* lineNumbersStyle: "table",*/ /* "table" or "inline" */ /* lineNumbersStyle: "table",*/ /* "table" or "inline" */
alwaysWrapLineHighlights: false, //alwaysWrapLineHighlights: false,
// eligible to change the default to \n in a new major version. // eligible to change the default to \n in a new major version.
lineSeparator: "<br>", //lineSeparator: "<br>",
preAttributes: {}, preAttributes: {},
codeAttributes: { codeAttributes: {
theme: "onedark", theme: "onedark",

5
README.md
View File

@ -41,3 +41,8 @@ Theme can be set to one of these [themes](https://xyproto.github.io/splash/docs/
- `lineNumbers` will add line numbers starting from 1 for each code block. - `lineNumbers` will add line numbers starting from 1 for each code block.
- `lineNumbersStyle` if `table` is used, then code block will use a table to make it easier to drag and select the code. - `lineNumbersStyle` if `table` is used, then code block will use a table to make it easier to drag and select the code.
## TO DO
- [✅] Support `.liquid` files
- [] Add passed in `code` and `pre` atributes into returned html from chroma

52
demo/test-liquid.liquid
View File

@ -5,63 +5,63 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title> <title></title>
<link rel="stylesheet" href="../test.css"> <link rel="stylesheet" href="../test.css">
<link rel="stylesheet" href="../prism-theme.css"> <!-- <link rel="stylesheet" href="../prism-theme.css"> -->
</head> </head>
<body> <body>
Just JS Just JS
{% highlight js %} {% highlight js %}
function myFunction() { function myFunction() {
return true; return true;
} }
{% endhighlight %} {% endhighlight %}
Just JS multiline Just JS multiline
{% highlight js %} {% highlight js %}
let multilineString = ` let multilineString = `
this is the first line this is the first line
this is the middle line this is the middle line
this is the last line this is the last line
`; `;
{% endhighlight %} {% endhighlight %}
JS + Linehighlight JS + Linehighlight
{% highlight js 1,3 %} {% highlight js 1,3 %}
let multilineString = ` let multilineString = `
this is the first line this is the first line
this is the middle line this is the middle line
this is the last line this is the last line
`; `;
{% endhighlight %} {% endhighlight %}
Swift + show lineNumbers Swift + show lineNumbers
{% highlight swift lineNumbers %} {% highlight swift lineNumbers %}
let multilineString = ` let multilineString = `
this is the first line this is the first line
this is the middle line this is the middle line
this is the last line this is the last line
`; `;
{% endhighlight %} {% endhighlight %}
Swift + show lineNumbers + highlight 1 & 3 Swift + show lineNumbers + highlight 1 & 3
{% highlight swift lineNumbers 1,3 %} {% highlight swift lineNumbers 1,3 %}
let multilineString = ` let multilineString = `
this is the first line this is the first line
this is the middle line this is the middle line
this is the last line this is the last line
`; `;
{% endhighlight %} {% endhighlight %}
Swift + show lineNumbers + highlight 1 & 3 Swift + show lineNumbers + highlight 1 & 3
{% highlight swift lineNumbers 1,3 table %} {% highlight swift lineNumbers 2:3 table %}
let multilineString = ` let multilineString = `
this is the first line this is the first line
this is the middle line this is the middle line
this is the last line this is the last line
`; `;
{% endhighlight %} {% endhighlight %}

16
src/LiquidHighlightTag.js
View File

@ -12,13 +12,7 @@ class LiquidHighlightTag {
let ret = function (highlighter) { let ret = function (highlighter) {
return { return {
parse: function (tagToken, remainTokens) { parse: function (tagToken, remainTokens) {
console.log(">>LIQIUD"); this.args = tagToken.args;
console.log(tagToken.args);
console.log("<<LIQIUD");
let split = tagToken.args.split(" ");
this.language = split.shift();
this.highlightLines = split.join(" ");
this.tokens = []; this.tokens = [];
@ -44,13 +38,9 @@ class LiquidHighlightTag {
return token.raw || token.getText(); return token.raw || token.getText();
}); });
let tokenStr = tokens.join("").trim(); let tokenStr = tokens.join("").trim();
console.log(this.args);
return Promise.resolve( return Promise.resolve(
HighlightPairedShortcode( HighlightPairedShortcode(tokenStr, this.args, options)
tokenStr,
this.language,
this.highlightLines,
options
)
); );
}, },
}; };