4
4
[ ![ Travis badge] ( https://img.shields.io/travis/weirdpattern/gatsby-remark-embed-gist.svg?branch=master&style=flat-square )] ( https://travis-ci.org/weirdpattern/gatsby-remark-embed-gist )
5
5
[ ![ codecov] ( https://codecov.io/gh/weirdpattern/gatsby-remark-embed-gist/branch/master/graph/badge.svg )] ( https://codecov.io/gh/weirdpattern/gatsby-remark-embed-gist )
6
6
7
- This plugin allows content authors to embed [ Gist] ( https://gist.github.com/ )
7
+ This plugin allows content authors to embed [ Gist] ( https://gist.github.com/ )
8
8
snippets.
9
9
10
10
## Getting started
11
11
12
- To embed a Gist snippet in you markdown/remark content, simply add an inline code
12
+ To embed a Gist snippet in you markdown/remark content, simply add an inline code
13
13
block using the ` gist: ` protocol.
14
14
15
15
``` md
@@ -23,16 +23,18 @@ block using the `gist:` protocol.
23
23
`gist:[<username>/]<gist_id>?file=<gist_file>?highlights=<number|ranges>&lines=<number|ranges>`
24
24
```
25
25
26
- Where:
26
+ Where:
27
+
27
28
- ** username** , represents the github handler whose gist is to be accessed.
28
- Can be defaulted via configuration.
29
- - ** gist_id** , is the id of the gist to be accessed.
30
- This is the hash value in the gist url, e.g. https://gist.github.com/ <username\> /` ce54fdb1e5621b5966e146026995b974 ` ).
31
- - ** gist_file** , is the name of the file in the gist to be accessed.
29
+ Can be defaulted via configuration.
30
+ - ** gist_id** , is the id of the gist to be accessed.
31
+ This is the hash value in the gist url, e.g. https://gist.github.com/ <username\> /` ce54fdb1e5621b5966e146026995b974 ` ).
32
+ - ** gist_file** , is the name of the file in the gist to be accessed.
32
33
33
34
Highlights and lines can be defined using:
35
+
34
36
- A single number (e.g. ` highlights=1 ` , ` lines=1 ` )
35
- - A list of numbers (e.g. ` highlights=1,4 ` , ` lines=1,4 ` )
37
+ - A list of numbers (e.g. ` highlights=1,4 ` , ` lines=1,4 ` )
36
38
- A range of numbers (e.g. ` highlights=1-4 ` , ` lines=1-4 ` )
37
39
- A combination of all above (e.g. ` highlights=1,3,7-9 ` , ` lines=1,3,7-9 ` )
38
40
@@ -54,11 +56,25 @@ Highlights and lines can be defined using:
54
56
// Optional:
55
57
56
58
// the github handler whose gists are to be accessed
57
- username: ' weirdpattern' ,
59
+ username: " <string>" ,
60
+
61
+ // a flag indicating whether the github default gist css should be included or not
62
+ // default: true
63
+ // DEPRECATED (PLEASE USE gistDefaultCssInclude)
64
+ includeDefaultCss: true || false ,
58
65
59
66
// a flag indicating whether the github default gist css should be included or not
60
67
// default: true
61
- includeDefaultCss: true
68
+ gistDefaultCssInclude: true || false ,
69
+
70
+ // a flag indicating whether the github default gist css should be preloaded or not
71
+ // use this if you want to load the default css asynchronously.
72
+ // default: false
73
+ gistCssPreload: true || false ,
74
+
75
+ // a string that represents the github default gist css url.
76
+ // defaults: "https://github.githubassets.com/assets/gist-embed-b3b573358bfc66d89e1e95dbf8319c09.css"
77
+ gistCssUrlAddress: " <string>"
62
78
}
63
79
}
64
80
]
@@ -68,45 +84,68 @@ Highlights and lines can be defined using:
68
84
69
85
## Example
70
86
71
- Turns this...
87
+ Turns this...
88
+
72
89
``` md
73
90
`gist:weirdpattern/ce54fdb1e5621b5966e146026995b974#syntax.text`
74
91
```
75
92
76
- Into this...
93
+ Into this...
94
+
77
95
``` html
78
96
<div id =" gist90436059" class =" gist" >
79
- <div class =" gist-file" >
80
- <div class =" gist-data" >
81
- <div class =" js-gist-file-update-container js-task-list-container file-box" >
82
- <div id =" file-syntax-text" class =" file" >
83
- <div itemprop =" text" class =" blob-wrapper data type-text" >
84
- <table class =" highlight tab-size js-file-line-container" data-tab-size =" 8" >
85
- <tbody >
86
- <tr >
87
- <td id =" file-syntax-text-L1" class =" blob-num js-line-number" data-line-number =" 1" ></td >
88
- <td id =" file-syntax-text-LC1" class =" blob-code blob-code-inner js-file-line" >< ; operation> ; [n]> ; /dev/null [options]</td >
89
- </tr >
90
- </tbody >
91
- </table >
92
- </div >
97
+ <div class =" gist-file" >
98
+ <div class =" gist-data" >
99
+ <div
100
+ class =" js-gist-file-update-container js-task-list-container file-box"
101
+ >
102
+ <div id =" file-syntax-text" class =" file" >
103
+ <div itemprop =" text" class =" blob-wrapper data type-text" >
104
+ <table
105
+ class =" highlight tab-size js-file-line-container"
106
+ data-tab-size =" 8"
107
+ >
108
+ <tbody >
109
+ <tr >
110
+ <td
111
+ id =" file-syntax-text-L1"
112
+ class =" blob-num js-line-number"
113
+ data-line-number =" 1"
114
+ ></td >
115
+ <td
116
+ id =" file-syntax-text-LC1"
117
+ class =" blob-code blob-code-inner js-file-line"
118
+ >
119
+ < ; operation> ; [n]> ; /dev/null [options]
120
+ </td >
121
+ </tr >
122
+ </tbody >
123
+ </table >
93
124
</div >
94
125
</div >
95
126
</div >
96
- <div class =" gist-meta" >
97
- <a href =" https://gist.github.com/weirdpattern/ce54fdb1e5621b5966e146026995b974/raw/30a0ad953a8d79c8bcbdd76343d86a9e4bbda311/syntax.text" style =" float :right " >view raw</a >
98
- <a href =" https://gist.github.com/weirdpattern/ce54fdb1e5621b5966e146026995b974#file-syntax-text" >syntax.text</a >
99
- hosted with ❤ by <a href =" https://github.com" >GitHub</a >
100
- </div >
101
127
</div >
128
+ <div class =" gist-meta" >
129
+ <a
130
+ href =" https://gist.github.com/weirdpattern/ce54fdb1e5621b5966e146026995b974/raw/30a0ad953a8d79c8bcbdd76343d86a9e4bbda311/syntax.text"
131
+ style =" float :right "
132
+ >view raw</a
133
+ >
134
+ <a
135
+ href =" https://gist.github.com/weirdpattern/ce54fdb1e5621b5966e146026995b974#file-syntax-text"
136
+ >syntax.text</a
137
+ >
138
+ hosted with ❤ by <a href =" https://github.com" >GitHub</a >
139
+ </div >
140
+ </div >
102
141
</div >
103
142
```
104
143
105
144
## Notes
106
145
107
- The order of the plugins only matters when used in conjunction with
108
- ` gatsby-remark-prismjs ` , because this plugin transforms the inline code blocks,
109
- so add ` gatsby-remark-embed-gist ` somewhere above this plugin.
146
+ The order of the plugins only matters when used in conjunction with
147
+ ` gatsby-remark-prismjs ` , because this plugin transforms the inline code blocks,
148
+ so add ` gatsby-remark-embed-gist ` somewhere above this plugin.
110
149
111
150
## License
112
151
0 commit comments