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

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")) {

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)

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

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>

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>

Binary file not shown.

After

Width:  |  Height:  |  Size: 63 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 49 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 25 KiB