Skip to content

Commit 231eaf7

Browse files
Add Embed a gist section
1 parent bebd2a9 commit 231eaf7

File tree

1 file changed

+55
-0
lines changed

1 file changed

+55
-0
lines changed

docs/embed-files.md

+55
Original file line numberDiff line numberDiff line change
@@ -92,3 +92,58 @@ Embedding any type of source code file, you can specify the highlighted language
9292
[](_media/example.html ':include :type=code text')
9393

9494
?> How to set highlight? You can see [here](language-highlight.md).
95+
96+
## Embed a gist
97+
98+
You can embed a gist as markdown content or as a code block. No plugin or app config change is needed - just an element which follows the formatting covered in [Embed files](#embed-files) and uses a raw gist URL.
99+
100+
Start by viewing a gist on `gist.github.com`.
101+
102+
For the purposes of the examples below, we assume is this is a valid gist URL.
103+
104+
- https://gist.github.com/docsify/c2bece08f27c4277001f123898d16a7c
105+
106+
Identify the following:
107+
108+
- **Github username** - e.g. `docsify`
109+
- **Gist ID** - e.g. `c2bece08f27c4277001f123898d16a7c`
110+
- **Filename** - choose any valid filename in the gist e.g. `instructions.md`
111+
112+
Next, you can create the full URL for the file on the `gist.githubusercontent.com` domain. See below for markdown or codeblock approaches.
113+
114+
### Render markdown content from gist
115+
116+
Embed markdown content on your Docsify page. This is a great way to embed content seemlessly without an external link, whether the gist was created by yourself or another account.
117+
118+
Here is the format:
119+
120+
```markdown
121+
[LABEL](https://gist.githubusercontent.com/USERNAME/GIST_ID/raw/FILENAME ':include')
122+
```
123+
124+
Note that the `LABEL` will be the fallback text if the link is broken - so if the filename is there it helps for debugging.
125+
126+
Using the example case, the element would be:
127+
128+
```markdown
129+
[instructions.md](https://gist.githubusercontent.com/docsify/c2bece08f27c4277001f123898d16a7c/raw/instructions.md ':include')
130+
```
131+
132+
### Render codeblock from gist
133+
134+
Embed a gist on your Docsify page as a code block. The format is the same as the previous section except it just has `:type=code` added on in the alt text.
135+
136+
As with the [Embedded file type](#embedded-file-type) section, the syntax highlighting will be inferred from the extension (e.g. `.js` or `.py`) so you can leave the type as `code`.
137+
138+
Here is the format:
139+
140+
```markdown
141+
[LABEL](https://gist.githubusercontent.com/USERNAME/GIST_ID/raw/FILENAME ':include :type=code')
142+
```
143+
144+
Using the example case, the element would be:
145+
146+
```markdown
147+
[instructions.md](https://gist.githubusercontent.com/docsify/c2bece08f27c4277001f123898d16a7c/raw/instructions.md ':include :type=code')
148+
```
149+

0 commit comments

Comments
 (0)