Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat: Support hide lines in remark-embed-snippet #6084

Merged
merged 41 commits into from
Dec 31, 2018
Merged

feat: Support hide lines in remark-embed-snippet #6084

Show file tree
Hide file tree
Changes from 8 commits
Commits
Show all changes
41 commits
Select commit Hold shift + click to select a range
ccb6f62
Support hide lines
washingtonsoares Jun 21, 2018
7da3162
Update README
washingtonsoares Jun 22, 2018
a60891e
Write test case
washingtonsoares Jun 22, 2018
a280b94
Update screenshot example URL
washingtonsoares Jun 25, 2018
92fcba3
Create rule for hidden and highlighted rows do not overlap
washingtonsoares Jun 27, 2018
69fdee7
Show file name when throw Error
washingtonsoares Jun 27, 2018
a7bdb18
Update message error
washingtonsoares Jun 27, 2018
7324d39
Wording improvements
washingtonsoares Jul 24, 2018
688c903
Merge branch 'master' of github.com:gatsbyjs/gatsby into support-hide…
washingtonsoares Sep 17, 2018
63f588f
Update test snapshot
washingtonsoares Sep 17, 2018
6b37cdf
Add support to hideline-next-line
washingtonsoares Sep 17, 2018
df80eed
Merge branch 'master' of github.com:gatsbyjs/gatsby into support-hide…
washingtonsoares Sep 18, 2018
3b5a881
Merge branch 'master' of github.com:gatsbyjs/gatsby into support-hide…
washingtonsoares Sep 18, 2018
0e62ca2
Add blank lines in test case
washingtonsoares Sep 24, 2018
5ecf804
Merge branch 'master' of github.com:gatsbyjs/gatsby into support-hide…
washingtonsoares Sep 24, 2018
4cd6ab7
Refactoring hideline-range test cases
washingtonsoares Sep 26, 2018
65ef8b9
Merge branch 'master' of github.com:gatsbyjs/gatsby into support-hide…
washingtonsoares Sep 26, 2018
986d615
Remove console.log
washingtonsoares Sep 26, 2018
8f2a727
Merge branch 'master' of github.com:gatsbyjs/gatsby into support-hide…
washingtonsoares Sep 27, 2018
8407607
Update README
washingtonsoares Oct 6, 2018
ecaa0f6
Merge branch 'master' of github.com:gatsbyjs/gatsby into support-hide…
washingtonsoares Oct 6, 2018
bb0f3f4
Merge branch 'master' of github.com:gatsbyjs/gatsby into support-hide…
washingtonsoares Oct 8, 2018
0f0a377
Merge branch 'master' of github.com:gatsbyjs/gatsby into support-hide…
washingtonsoares Oct 8, 2018
8eb4dbb
Merge branch 'master' of github.com:gatsbyjs/gatsby into support-hide…
washingtonsoares Oct 9, 2018
c92a6e4
Merge branch 'master' of github.com:gatsbyjs/gatsby into support-hide…
washingtonsoares Oct 11, 2018
66eaa65
Merge remote-tracking branch 'origin/master' into pr6084
pieh Dec 7, 2018
c42ba96
update gitignore to use pattern
pieh Dec 8, 2018
0a44d6c
gatsby-remark-prismjs: add `hide` directives
pieh Dec 8, 2018
53c4fae
wip
pieh Dec 12, 2018
190ec0b
Merge branch 'master' into 6084
m-allanson Dec 18, 2018
7341226
Add language tags to code fences
m-allanson Dec 18, 2018
98cef72
Fix example syntax
m-allanson Dec 18, 2018
d9e38d7
Add demo page to the using-remark example site
m-allanson Dec 18, 2018
353f078
Fix missing layout
m-allanson Dec 18, 2018
9d6e3aa
Reverse order to start with hello world, then on to specific subjects
m-allanson Dec 18, 2018
f727d86
Ignore errors for missing files
m-allanson Dec 18, 2018
c676e15
Port tests from remark-embed-snippet to remark-prismjs
m-allanson Dec 19, 2018
0349dd4
Merge branch 'master' into 6084
m-allanson Dec 19, 2018
4062fb1
Fix lint errors
m-allanson Dec 19, 2018
2a1b01c
Re-enable errors for missing files
m-allanson Dec 19, 2018
4e3c607
Add info on hiding lines to the gatsby-remark-prismjs readme
m-allanson Dec 19, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 24 additions & 0 deletions packages/gatsby-remark-embed-snippet/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -110,6 +110,30 @@ baz: "highlighted"
quz: "highlighted"
```

### Hide Lines

It's also possible to specify a range of lines to be hidden.

#### JavaScript example

```js
// hideline-range{1-3,9-11}
washingtonsoares marked this conversation as resolved.
Show resolved Hide resolved
import React from "react"
import ReactDOM from "react-dom"

function App() {
return (
<h1>Hello world!</h1>
)
}

const rootElement = document.getElementById("root")
ReactDOM.render(<App />, rootElement)
```

Will produce something like this:
![screenshot from 2018-06-21 20-21-58](https://i.imgur.com/cYlAKZg.png)

## Installation

`npm install --save gatsby-remark-embed-snippet`
Expand Down
258 changes: 258 additions & 0 deletions packages/gatsby-remark-embed-snippet/src/__tests__/__snapshots__/index.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,6 +57,65 @@ Object {
}
`;

exports[`gatsby-remark-embed-snippet CSS files should support hideline-range markers 1`] = `
Object {
"children": Array [
Object {
"children": Array [
Object {
"position": Position {
"end": Object {
"column": 24,
"line": 1,
"offset": 23,
},
"indent": Array [],
"start": Object {
"column": 1,
"line": 1,
"offset": 0,
},
},
"type": "html",
"value": "<div class=\\"gatsby-highlight\\">
<pre class=\\"language-css\\"><code><span class=\\"token selector\\">html</span> <span class=\\"token punctuation\\">{</span>
<span class=\\"token property\\">padding</span><span class=\\"token punctuation\\">:</span> 50px<span class=\\"token punctuation\\">;</span>
<span class=\\"token punctuation\\">}</span></code></pre>
</div>",
},
],
"position": Position {
"end": Object {
"column": 24,
"line": 1,
"offset": 23,
},
"indent": Array [],
"start": Object {
"column": 1,
"line": 1,
"offset": 0,
},
},
"type": "paragraph",
},
],
"position": Object {
"end": Object {
"column": 24,
"line": 1,
"offset": 23,
},
"start": Object {
"column": 1,
"line": 1,
"offset": 0,
},
},
"type": "root",
}
`;

exports[`gatsby-remark-embed-snippet CSS files should support highlight-line and highlight-next-line markers 1`] = `
Object {
"children": Array [
Expand Down Expand Up @@ -237,6 +296,71 @@ Object {
}
`;

exports[`gatsby-remark-embed-snippet HTML files should support hideline-range markers 1`] = `
Object {
"children": Array [
Object {
"children": Array [
Object {
"position": Position {
"end": Object {
"column": 25,
"line": 1,
"offset": 24,
},
"indent": Array [],
"start": Object {
"column": 1,
"line": 1,
"offset": 0,
},
},
"type": "html",
"value": "<div class=\\"gatsby-highlight\\">
<pre class=\\"language-html\\"><code><span class=\\"token tag\\"><span class=\\"token tag\\"><span class=\\"token punctuation\\">&lt;</span>html</span><span class=\\"token punctuation\\">></span></span>
<span class=\\"token tag\\"><span class=\\"token tag\\"><span class=\\"token punctuation\\">&lt;</span>body</span><span class=\\"token punctuation\\">></span></span>
<span class=\\"token tag\\"><span class=\\"token tag\\"><span class=\\"token punctuation\\">&lt;</span>p</span><span class=\\"token punctuation\\">></span></span>
<span class=\\"token tag\\"><span class=\\"token tag\\"><span class=\\"token punctuation\\">&lt;</span>span</span><span class=\\"token punctuation\\">></span></span>not hidden<span class=\\"token tag\\"><span class=\\"token tag\\"><span class=\\"token punctuation\\">&lt;/</span>span</span><span class=\\"token punctuation\\">></span></span>
<span class=\\"token tag\\"><span class=\\"token tag\\"><span class=\\"token punctuation\\">&lt;/</span>p</span><span class=\\"token punctuation\\">></span></span>
<span class=\\"token tag\\"><span class=\\"token tag\\"><span class=\\"token punctuation\\">&lt;</span>ul</span><span class=\\"token punctuation\\">></span></span>
<span class=\\"token tag\\"><span class=\\"token tag\\"><span class=\\"token punctuation\\">&lt;/</span>ul</span><span class=\\"token punctuation\\">></span></span>
<span class=\\"token tag\\"><span class=\\"token tag\\"><span class=\\"token punctuation\\">&lt;/</span>body</span><span class=\\"token punctuation\\">></span></span>
<span class=\\"token tag\\"><span class=\\"token tag\\"><span class=\\"token punctuation\\">&lt;/</span>html</span><span class=\\"token punctuation\\">></span></span></code></pre>
</div>",
},
],
"position": Position {
"end": Object {
"column": 25,
"line": 1,
"offset": 24,
},
"indent": Array [],
"start": Object {
"column": 1,
"line": 1,
"offset": 0,
},
},
"type": "paragraph",
},
],
"position": Object {
"end": Object {
"column": 25,
"line": 1,
"offset": 24,
},
"start": Object {
"column": 1,
"line": 1,
"offset": 0,
},
},
"type": "root",
}
`;

exports[`gatsby-remark-embed-snippet HTML files should support highlight-line and highlight-next-line markers 1`] = `
Object {
"children": Array [
Expand Down Expand Up @@ -487,6 +611,138 @@ Object {
}
`;

exports[`gatsby-remark-embed-snippet JavaScript files should support hideline-range and highlight markers 1`] = `
Object {
"children": Array [
Object {
"children": Array [
Object {
"position": Position {
"end": Object {
"column": 23,
"line": 1,
"offset": 22,
},
"indent": Array [],
"start": Object {
"column": 1,
"line": 1,
"offset": 0,
},
},
"type": "html",
"value": "<div class=\\"gatsby-highlight\\">
<pre class=\\"language-jsx\\"><code>ReactDOM<span class=\\"token punctuation\\">.</span><span class=\\"token function\\">render</span><span class=\\"token punctuation\\">(</span>
<span class=\\"token tag\\"><span class=\\"token tag\\"><span class=\\"token punctuation\\">&lt;</span>div</span><span class=\\"token punctuation\\">></span></span>
<span class=\\"token tag\\"><span class=\\"token tag\\"><span class=\\"token punctuation\\">&lt;</span>ul</span><span class=\\"token punctuation\\">></span></span>
<span class=\\"token tag\\"><span class=\\"token tag\\"><span class=\\"token punctuation\\">&lt;</span>li</span><span class=\\"token punctuation\\">></span></span>Not hidden and highlighted<span class=\\"token tag\\"><span class=\\"token tag\\"><span class=\\"token punctuation\\">&lt;/</span>li</span><span class=\\"token punctuation\\">></span></span>
<span class=\\"token tag\\"><span class=\\"token tag\\"><span class=\\"token punctuation\\">&lt;</span>li</span><span class=\\"token punctuation\\">></span></span>Not hidden and highlighted<span class=\\"token tag\\"><span class=\\"token tag\\"><span class=\\"token punctuation\\">&lt;/</span>li</span><span class=\\"token punctuation\\">></span></span>
<span class=\\"gatsby-highlight-code-line\\"><span class=\\"token tag\\"><span class=\\"token tag\\"><span class=\\"token punctuation\\">&lt;</span>li</span><span class=\\"token punctuation\\">></span></span>Not hidden and highlighted<span class=\\"token tag\\"><span class=\\"token tag\\"><span class=\\"token punctuation\\">&lt;/</span>li</span><span class=\\"token punctuation\\">></span></span>
</span><span class=\\"gatsby-highlight-code-line\\"><span class=\\"token tag\\"><span class=\\"token tag\\"><span class=\\"token punctuation\\">&lt;/</span>ul</span><span class=\\"token punctuation\\">></span></span>
</span><span class=\\"gatsby-highlight-code-line\\"><span class=\\"token tag\\"><span class=\\"token tag\\"><span class=\\"token punctuation\\">&lt;/</span>div</span><span class=\\"token punctuation\\">></span></span><span class=\\"token punctuation\\">,</span>
</span>document<span class=\\"token punctuation\\">.</span><span class=\\"token function\\">getElementById</span><span class=\\"token punctuation\\">(</span><span class=\\"token string\\">'root'</span><span class=\\"token punctuation\\">)</span>
<span class=\\"token punctuation\\">)</span><span class=\\"token punctuation\\">;</span></code></pre>
</div>",
},
],
"position": Position {
"end": Object {
"column": 23,
"line": 1,
"offset": 22,
},
"indent": Array [],
"start": Object {
"column": 1,
"line": 1,
"offset": 0,
},
},
"type": "paragraph",
},
],
"position": Object {
"end": Object {
"column": 23,
"line": 1,
"offset": 22,
},
"start": Object {
"column": 1,
"line": 1,
"offset": 0,
},
},
"type": "root",
}
`;

exports[`gatsby-remark-embed-snippet JavaScript files should support hideline-range markers 1`] = `
Object {
"children": Array [
Object {
"children": Array [
Object {
"position": Position {
"end": Object {
"column": 23,
"line": 1,
"offset": 22,
},
"indent": Array [],
"start": Object {
"column": 1,
"line": 1,
"offset": 0,
},
},
"type": "html",
"value": "<div class=\\"gatsby-highlight\\">
<pre class=\\"language-jsx\\"><code>ReactDOM<span class=\\"token punctuation\\">.</span><span class=\\"token function\\">render</span><span class=\\"token punctuation\\">(</span>
<span class=\\"token tag\\"><span class=\\"token tag\\"><span class=\\"token punctuation\\">&lt;</span>div</span><span class=\\"token punctuation\\">></span></span>
<span class=\\"token tag\\"><span class=\\"token tag\\"><span class=\\"token punctuation\\">&lt;</span>ul</span><span class=\\"token punctuation\\">></span></span>
<span class=\\"token tag\\"><span class=\\"token tag\\"><span class=\\"token punctuation\\">&lt;</span>li</span><span class=\\"token punctuation\\">></span></span>Not hidden<span class=\\"token tag\\"><span class=\\"token tag\\"><span class=\\"token punctuation\\">&lt;/</span>li</span><span class=\\"token punctuation\\">></span></span>
<span class=\\"token tag\\"><span class=\\"token tag\\"><span class=\\"token punctuation\\">&lt;</span>li</span><span class=\\"token punctuation\\">></span></span>Not hidden<span class=\\"token tag\\"><span class=\\"token tag\\"><span class=\\"token punctuation\\">&lt;/</span>li</span><span class=\\"token punctuation\\">></span></span>
<span class=\\"token tag\\"><span class=\\"token tag\\"><span class=\\"token punctuation\\">&lt;</span>li</span><span class=\\"token punctuation\\">></span></span>Not hidden<span class=\\"token tag\\"><span class=\\"token tag\\"><span class=\\"token punctuation\\">&lt;/</span>li</span><span class=\\"token punctuation\\">></span></span>
<span class=\\"token tag\\"><span class=\\"token tag\\"><span class=\\"token punctuation\\">&lt;/</span>ul</span><span class=\\"token punctuation\\">></span></span>
<span class=\\"token tag\\"><span class=\\"token tag\\"><span class=\\"token punctuation\\">&lt;/</span>div</span><span class=\\"token punctuation\\">></span></span><span class=\\"token punctuation\\">,</span>
document<span class=\\"token punctuation\\">.</span><span class=\\"token function\\">getElementById</span><span class=\\"token punctuation\\">(</span><span class=\\"token string\\">'root'</span><span class=\\"token punctuation\\">)</span>
<span class=\\"token punctuation\\">)</span><span class=\\"token punctuation\\">;</span></code></pre>
</div>",
},
],
"position": Position {
"end": Object {
"column": 23,
"line": 1,
"offset": 22,
},
"indent": Array [],
"start": Object {
"column": 1,
"line": 1,
"offset": 0,
},
},
"type": "paragraph",
},
],
"position": Object {
"end": Object {
"column": 23,
"line": 1,
"offset": 22,
},
"start": Object {
"column": 1,
"line": 1,
"offset": 0,
},
},
"type": "root",
}
`;

exports[`gatsby-remark-embed-snippet JavaScript files should support highlight-line and highlight-next-line markers 1`] = `
Object {
"children": Array [
Expand Down Expand Up @@ -740,6 +996,8 @@ notHighlighted <span class=\\"token operator\\">=</span> <span class=\\"token nu
}
`;

exports[`gatsby-remark-embed-snippet JavaScript files should throw error when hidden and highlighted lines overlap 1`] = `[Error: The range number of hide-lines and highlight-lines cannot be intersected. Check the file: examples/hello-world.js.]`;

exports[`gatsby-remark-embed-snippet Markdown files should extract the correct Prism language 1`] = `
Object {
"children": Array [
Expand Down
Loading