updated readme, added examples of output and code used to generate it
This commit is contained in:
parent
04f69115c9
commit
5f3d7238d9
|
@ -3,10 +3,9 @@ const hasTemplateFormat = require("./src/hasTemplateFormat");
|
|||
const HighlightPairedShortcode = require("./src/HighlightPairedShortcode");
|
||||
const LiquidHighlightTag = require("./src/LiquidHighlightTag");
|
||||
// const CharacterWrap = require("./src/CharacterWrap");
|
||||
const markdownPrismJs = require("./src/markdownSyntaxHighlightOptions");
|
||||
const markdownChroma = require("./src/markdownSyntaxHighlightOptions");
|
||||
|
||||
module.exports = {
|
||||
// initArguments: { Prism },
|
||||
configFunction: function (eleventyConfig, options = {}) {
|
||||
try {
|
||||
eleventyConfig.versionCheck(pkg["11ty"].compatibility);
|
||||
|
@ -52,7 +51,7 @@ module.exports = {
|
|||
|
||||
if (hasTemplateFormat(options.templateFormats, "md")) {
|
||||
// ```js/0,2-3
|
||||
eleventyConfig.addMarkdownHighlighter(markdownPrismJs(options));
|
||||
eleventyConfig.addMarkdownHighlighter(markdownChroma(options));
|
||||
}
|
||||
|
||||
// if (hasTemplateFormat(options.templateFormats, "11ty.js")) {
|
||||
|
|
57
README.md
57
README.md
|
@ -46,3 +46,60 @@ Theme can be set to one of these [themes](https://xyproto.github.io/splash/docs/
|
|||
|
||||
- [✅] Support `.liquid` files
|
||||
- [] 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)
|
|
@ -5,16 +5,15 @@
|
|||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title></title>
|
||||
<link rel="stylesheet" href="../test.css">
|
||||
<!-- <link rel="stylesheet" href="../prism-theme.css"> -->
|
||||
</head>
|
||||
<body>
|
||||
|
||||
Just JS
|
||||
{% highlight js %}
|
||||
function myFunction() {
|
||||
return true;
|
||||
}
|
||||
{% endhighlight %}
|
||||
{% highlight js %}
|
||||
function myFunction() {
|
||||
return true;
|
||||
}
|
||||
{% endhighlight %}
|
||||
|
||||
Just JS multiline
|
||||
|
||||
|
|
|
@ -4,7 +4,6 @@
|
|||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title></title>
|
||||
<link rel="stylesheet" href="../test.css">
|
||||
<!-- <link rel="stylesheet" href="../prism-theme.css"> -->
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
|
|
@ -5,7 +5,6 @@
|
|||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title></title>
|
||||
<link rel="stylesheet" href="../test.css">
|
||||
<link rel="stylesheet" href="../prism-theme.css">
|
||||
</head>
|
||||
<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 |
Loading…
Reference in New Issue