forked from gatsbyjs/gatsby
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: allow highlight directives in prismjs plugin
Heavily inspired by DSchau#2
- Loading branch information
Showing
16 changed files
with
519 additions
and
99 deletions.
There are no files selected for viewing
85 changes: 29 additions & 56 deletions
85
packages/gatsby-remark-embed-snippet/src/__tests__/__snapshots__/index.js.snap
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,152 @@ | ||
"use strict" | ||
|
||
const rangeParser = require(`parse-numeric-range`) | ||
|
||
const COMMENT_START = /(#|\/\/|\{\/\*|\/\*+|<!--)/ | ||
const COMMENT_END = /(-->|\*\/\}|\*\/)?/ | ||
const DIRECTIVE = /highlight-(next-line|line|start|end|range)({([^}]+)})?/ | ||
const END_DIRECTIVE = /highlight-end/ | ||
const plainTextWithLFTest = /<span class="token plain-text">[^<]*\n[^<]*<\/span>/g | ||
|
||
const stripComment = line => | ||
line.replace( | ||
new RegExp( | ||
`\\s*${COMMENT_START.source}\\s*${DIRECTIVE.source}\\s*${ | ||
COMMENT_END.source | ||
}` | ||
), | ||
`` | ||
) | ||
|
||
const wrap = line => | ||
[`<span class="gatsby-highlight-code-line">`, `${line}\n`, `</span>`].join(``) | ||
|
||
const wrapAndStripComment = line => wrap(stripComment(line)) | ||
|
||
const getHighlights = (line, code, index) => { | ||
const [, directive, directiveRange] = line.match(DIRECTIVE) | ||
|
||
switch (directive) { | ||
case `next-line`: | ||
return [ | ||
{ | ||
code: wrap(code[index + 1]), | ||
highlighted: true, | ||
}, | ||
index + 1, | ||
] | ||
|
||
case `start`: { | ||
const endIndex = code.findIndex(line => END_DIRECTIVE.test(line)) | ||
const end = endIndex === -1 ? code.length : endIndex | ||
const highlighted = code.slice(index + 1, end).map(line => { | ||
return { | ||
code: wrap(line), | ||
highlighted: true, | ||
} | ||
}) | ||
return [highlighted, end] | ||
} | ||
|
||
case `line`: | ||
return [ | ||
{ | ||
code: wrapAndStripComment(line), | ||
highlighted: true, | ||
}, | ||
index, | ||
] | ||
|
||
case `range`: | ||
// if range is not provided we ignore the directive | ||
if (!directiveRange) { | ||
return [ | ||
{ | ||
code: code[index + 1], | ||
highlighted: false, | ||
}, | ||
index + 1, | ||
] | ||
} else { | ||
const strippedDirectiveRange = directiveRange.slice(1, -1) | ||
const range = rangeParser.parse(strippedDirectiveRange) | ||
|
||
if (range.length > 0) { | ||
// if current line is 10 and range is {1-5, 7}, lastLineIndexInRange === 17 | ||
let lastLineIndexInRange = index + 1 + range[range.length - 1] // if range goes farther than code length, make lastLineIndexInRange equal to code length | ||
|
||
if (lastLineIndexInRange > code.length) { | ||
lastLineIndexInRange = code.length | ||
} | ||
|
||
const highlighted = code | ||
.slice(index + 1, lastLineIndexInRange) | ||
.map((line, idx) => { | ||
return { | ||
code: range.includes(idx + 1) ? wrap(line) : line, | ||
highlighted: range.includes(idx + 1), | ||
} | ||
}) | ||
return [highlighted, lastLineIndexInRange] | ||
} // if range is incorrect we ignore the directive | ||
|
||
return [ | ||
{ | ||
code: code[index + 1], | ||
highlighted: false, | ||
}, | ||
index + 1, | ||
] | ||
} | ||
|
||
default: | ||
return [ | ||
{ | ||
code: wrap(line), | ||
highlighted: true, | ||
}, | ||
index, | ||
] | ||
} | ||
} | ||
|
||
module.exports = function highlightLineRange(code, highlights = []) { | ||
let highlighted = [] | ||
const split = code.split(`\n`) | ||
|
||
if (highlights.length > 0) { | ||
// HACK split plain-text spans with line separators inside into multiple plain-text spans | ||
// separatered by line separator - this fixes line highlighting behaviour for jsx | ||
code = code.replace(plainTextWithLFTest, match => | ||
match.replace(/\n/g, `</span>\n<span class="token plain-text">`) | ||
) | ||
return split.map((line, i) => { | ||
if (highlights.includes(i + 1)) { | ||
return { | ||
highlighted: true, | ||
code: line, | ||
} | ||
} | ||
|
||
return { | ||
code: line, | ||
} | ||
}) | ||
} | ||
|
||
for (let i = 0; i < split.length; i++) { | ||
const line = split[i] | ||
|
||
if (DIRECTIVE.test(line)) { | ||
const [highlights, index] = getHighlights(line, split, i) | ||
highlighted = highlighted.concat(highlights) | ||
i = index | ||
} else { | ||
highlighted.push({ | ||
code: line, | ||
}) | ||
} | ||
} | ||
|
||
return highlighted | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
37 changes: 37 additions & 0 deletions
37
packages/gatsby-remark-prismjs/src/__tests__/__snapshots__/highlight-line-range.js.snap
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,37 @@ | ||
// Jest Snapshot v1, https://goo.gl/fbAQLP | ||
|
||
exports[`highlighting a line range highlight-line highlights line 1`] = ` | ||
"<span class=\\"gatsby-highlight-code-line\\"> return \\"hello world\\" | ||
</span>" | ||
`; | ||
exports[`highlighting a line range highlight-next-line highlights correct line 1`] = ` | ||
"<span class=\\"gatsby-highlight-code-line\\"> return \\"hello world\\" | ||
</span>" | ||
`; | ||
exports[`highlighting a line range highlight-start / highlight-end highlights correct lines 1`] = ` | ||
"<span class=\\"gatsby-highlight-code-line\\"> var a = \\"b\\" | ||
</span> | ||
<span class=\\"gatsby-highlight-code-line\\"> return a + \\"hello world\\" | ||
</span>" | ||
`; | ||
exports[`highlighting a line range highlight-start / highlight-end highlights without end directive 1`] = ` | ||
"<span class=\\"gatsby-highlight-code-line\\">var a = \\"b\\" | ||
</span> | ||
<span class=\\"gatsby-highlight-code-line\\">return a + \\"hello world\\" | ||
</span> | ||
<span class=\\"gatsby-highlight-code-line\\"> | ||
</span>" | ||
`; | ||
exports[`highlighting a line range jsx comment highlights comment line 1`] = ` | ||
"<span class=\\"gatsby-highlight-code-line\\"> <button>sup</button> | ||
</span>" | ||
`; | ||
exports[`highlighting a line range yaml highlights yaml 1`] = ` | ||
"<span class=\\"gatsby-highlight-code-line\\">- title: catorce | ||
</span>" | ||
`; |
9 changes: 9 additions & 0 deletions
9
packages/gatsby-remark-prismjs/src/__tests__/fixtures/highlight-html.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,9 @@ | ||
<!doctype html> | ||
<html> | ||
<head> | ||
<title>Helloooooooooo</title> | ||
</head> | ||
<body> | ||
<h1>hello world</h1> <!-- highlight-line --> | ||
</body> | ||
</html> |
8 changes: 8 additions & 0 deletions
8
packages/gatsby-remark-prismjs/src/__tests__/fixtures/highlight-jsx-comment.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,8 @@ | ||
import React from "react" | ||
export default function Button() { | ||
return ( | ||
<div> | ||
<button>sup</button> {/* highlight-line */} | ||
</div> | ||
) | ||
} |
25 changes: 25 additions & 0 deletions
25
packages/gatsby-remark-prismjs/src/__tests__/fixtures/highlight-kitchen-sink.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,25 @@ | ||
import React, { Component } from "react" // highlight-line | ||
export default class Counter extends Component { | ||
/* highlight-start */ | ||
state = { | ||
count: 0, | ||
} | ||
// highlight-end | ||
updateCount = () => { | ||
this.setState(state => ({ | ||
// highlight-next-line | ||
count: state.count + 1, | ||
})) | ||
} | ||
render() { | ||
const { count } = this.state // highlight-line | ||
return ( | ||
<div> | ||
<span>clicked {count}</span> | ||
{/* highlight-start */} | ||
<button onClick={this.updateCount}>Click me</button> | ||
{/* highlight-end */} | ||
</div> | ||
) | ||
} | ||
} |
3 changes: 3 additions & 0 deletions
3
packages/gatsby-remark-prismjs/src/__tests__/fixtures/highlight-line.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,3 @@ | ||
function test() { | ||
return "hello world" // highlight-line | ||
} |
4 changes: 4 additions & 0 deletions
4
packages/gatsby-remark-prismjs/src/__tests__/fixtures/highlight-next-line.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,4 @@ | ||
function test() { | ||
// highlight-next-line | ||
return "hello world" | ||
} |
6 changes: 6 additions & 0 deletions
6
packages/gatsby-remark-prismjs/src/__tests__/fixtures/highlight-start-end.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,6 @@ | ||
function test() { | ||
// highlight-start | ||
var a = "b" | ||
return a + "hello world" | ||
// highlight-end | ||
} |
3 changes: 3 additions & 0 deletions
3
packages/gatsby-remark-prismjs/src/__tests__/fixtures/highlight-start-without-end.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,3 @@ | ||
// highlight-start | ||
var a = "b" | ||
return a + "hello world" |
3 changes: 3 additions & 0 deletions
3
packages/gatsby-remark-prismjs/src/__tests__/fixtures/highlight-yaml.yaml
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,3 @@ | ||
- title: uno | ||
- title: dos | ||
- title: catorce # highlight-line |
12 changes: 12 additions & 0 deletions
12
packages/gatsby-remark-prismjs/src/__tests__/fixtures/index.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,12 @@ | ||
const fs = require(`fs-extra`) | ||
const path = require(`path`) | ||
const base = __dirname | ||
module.exports = fs.readdirSync(base).reduce((lookup, file) => { | ||
if (file !== `index.js`) { | ||
const name = file | ||
.replace(/-(\w)/g, (_, char) => char.toUpperCase()) | ||
.replace(/\..+/, ``) | ||
lookup[name] = fs.readFileSync(path.join(base, file), `utf8`) | ||
} | ||
return lookup | ||
}, {}) |
Oops, something went wrong.