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

updated readme, added examples of output and code used to generate it

This commit is contained in:
Robert McGovern 2023-02-03 02:54:28 +00:00
parent 04f69115c9
commit 5f3d7238d9
8 changed files with 64 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
.eleventy.js
View File

@ -3,10 +3,9 @@ const hasTemplateFormat = require("./src/hasTemplateFormat");
const HighlightPairedShortcode = require("./src/HighlightPairedShortcode"); const HighlightPairedShortcode = require("./src/HighlightPairedShortcode");
const LiquidHighlightTag = require("./src/LiquidHighlightTag"); const LiquidHighlightTag = require("./src/LiquidHighlightTag");
// const CharacterWrap = require("./src/CharacterWrap"); // const CharacterWrap = require("./src/CharacterWrap");
const markdownPrismJs = require("./src/markdownSyntaxHighlightOptions"); const markdownChroma = require("./src/markdownSyntaxHighlightOptions");
module.exports = { module.exports = {
// initArguments: { Prism },
configFunction: function (eleventyConfig, options = {}) { configFunction: function (eleventyConfig, options = {}) {
try { try {
eleventyConfig.versionCheck(pkg["11ty"].compatibility); eleventyConfig.versionCheck(pkg["11ty"].compatibility);
@ -52,7 +51,7 @@ module.exports = {
if (hasTemplateFormat(options.templateFormats, "md")) { if (hasTemplateFormat(options.templateFormats, "md")) {
// ```js/0,2-3 // ```js/0,2-3
eleventyConfig.addMarkdownHighlighter(markdownPrismJs(options)); eleventyConfig.addMarkdownHighlighter(markdownChroma(options));
} }
// if (hasTemplateFormat(options.templateFormats, "11ty.js")) { // if (hasTemplateFormat(options.templateFormats, "11ty.js")) {

57
README.md
View File

@ -46,3 +46,60 @@ Theme can be set to one of these [themes](https://xyproto.github.io/splash/docs/
- [✅] Support `.liquid` files - [✅] Support `.liquid` files
- [] Add passed in `code` and `pre` atributes into returned html from chroma - [] Add passed in `code` and `pre` atributes into returned html from chroma
- [] Add testing
- [] Add improve regex for line numbers
- [] Add other arguments that chroma can take (`--html-tab-width`, `--html-highlight-style`, maybe `--html-linkable-lines`)
## Example output
Highlight line 1 and 3
````
```js
let multilineString = `
this is the first line
this is the middle line
this is the last line
`;
```
````
![](./images/hightlight-first-and-third-lines.png)
Line numbers shown and highlighting range of lines 3 through 6
````
```js/3:6/lineNumbers
let multilineString = `
this is the first line
this is the second line
this is the third line
this is the fourth line
this is the fifth line
this is the sixth line
this is the seventh line
this is the eighth line
`;
```
````
![](./images/highlight-range-with-line-numbers.png)
Line numbers shown, line numbers set to start at 200, and highlighting range of lines 202 through 204
````
```js/202:204/lineNumbers/table/lineNumbersStart=200
let multilineString = `
this is the first line
this is the second line
this is the third line
this is the fourth line
this is the fifth line
this is the sixth line
this is the seventh line
this is the eighth line
`;
```
````
![](./images/highlight-range-with-line-numbers-arbitary-start-number.png)

9
demo/test-liquid.liquid
View File

@ -5,16 +5,15 @@
<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"> -->
</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

1
demo/test-markdown.md
View File

@ -4,7 +4,6 @@
<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"> -->
</head> </head>
<body> <body>

1
demo/test-nunjucks.njk
View File

@ -5,7 +5,6 @@
<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">
</head> </head>
<body> <body>

BIN
images/highlight-range-with-line-numbers-arbitary-start-number.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 63 KiB

BIN
images/highlight-range-with-line-numbers.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 49 KiB

BIN
images/hightlight-first-and-third-lines.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 25 KiB