Skip to content

Commit 5880e64

Browse files
Add real gist to embed-files.md
1 parent ade8c17 commit 5880e64

File tree

1 file changed

+34
-18
lines changed

1 file changed

+34
-18
lines changed

docs/embed-files.md

Lines changed: 34 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,8 @@ You can check the original content for [example.md](_media/example.md ':ignore')
1818

1919
Normally, this will compiled into a link, but in docsify, if you add `:include` it will be embedded.
2020

21+
External links can be used too - just replace the target. If you want to use a gist URL, see [Embed a gist](#embed-a-gist) section.
22+
2123
## Embedded file type
2224

2325
Currently, file extensions are automatically recognized and embedded in different ways.
@@ -101,60 +103,74 @@ You can embed a gist as markdown content or as a code block - this is based on t
101103

102104
### Identify the gist's metadata
103105

104-
Start by viewing a gist on `gist.github.com`. For the purposes of this guide, we assume that is this is a valid gist URL:
106+
Start by viewing a gist on `gist.github.com`. For the purposes of this guide, we use this gist:
105107

106-
- https://gist.github.com/docsify/c2bece08f27c4277001f123898d16a7c
108+
- https://gist.github.com/anikethsaha/f88893bb563bb7229d6e575db53a8c15
107109

108-
Identify the following from the gist:
110+
Identify the following items from the gist:
109111

110-
- **Github username** - e.g. `docsify`
111-
- **Gist ID** - e.g. `c2bece08f27c4277001f123898d16a7c`
112-
- **Filename** - choose any valid filename in the gist e.g. `instructions.md`
112+
Field | Example | Description
113+
--- | --- | ---
114+
**Username** | `anikethsaha` | The gist's owner.
115+
**Gist ID** | `c2bece08f27c4277001f123898d16a7c` | Identifier for the gist. This is fixed for the gist's lifetime.
116+
**Filename** | `content.md` | Select a name of a file in the gist. This needed even on a single-file gist for embedding to work.
113117

114-
Now you have to build the _raw gist URL_ for the target file on the `gist.githubusercontent.com` domain.
118+
You will need those to build the _raw gist URL_ for the target file. This has the following format:
115119

116-
For example:
120+
- https://gist.githubusercontent.com/USERNAME/GIST_ID/raw/FILENAME
121+
122+
Here are two examples based on the sample gist:
117123

118-
- https://gist.githubusercontent.com/docsify/c2bece08f27c4277001f123898d16a7c/raw/instructions.md
124+
- https://gist.githubusercontent.com/anikethsaha/f88893bb563bb7229d6e575db53a8c15/raw/content.md
125+
- https://gist.githubusercontent.com/anikethsaha/f88893bb563bb7229d6e575db53a8c15/raw/script.js
119126

120-
?> Alternatively, you can get a raw gist URL directly from a gist by clicking the _Raw_ button on a gist file. But if you use that value, just be sure to **remove** the revision number between `raw/` and the filename so that the URL matches the pattern above instead. Otherwise your embedded gist will **not** show the latest content when the gist is updated.
127+
?> Alternatively, you can get a raw URL directly from a gist by clicking the _Raw_ button next to file. But, if you use that approach, just be sure to **remove** the revision number between `raw/` and the filename so that the URL matches the pattern above instead. Otherwise your embedded gist will **not** show the latest content when the gist is updated.
121128

122129
Continue with one of the sections below to embed the gist on a Docsify page.
123130

124131
### Render markdown content from a gist
125132

126133
This is a great way to embed content **seamlessly** in your docs, without sending someone to an external link. This approach is well-suited to reusing a gist of say installation instructions across doc sites of multiple repos.
127134

128-
?> This approach works equally well with a gist owned by your account or by someone else.
135+
?> This approach works equally well with a gist owned by your account or by another user.
129136

130137
Here is the format:
131138

132139
```markdown
133140
[LABEL](https://gist.githubusercontent.com/USERNAME/GIST_ID/raw/FILENAME ':include')
134141
```
135142

136-
Using the example case, the element on your Docsify page would be:
143+
?> The `LABEL` can be any text you want. It acts as a _fallback_ message if the link is broken - so it is useful to repeat the filename here in case you need to fix a broken link.
144+
145+
For example:
137146

138147
```markdown
139-
[gist: instructions.md](https://gist.githubusercontent.com/docsify/c2bece08f27c4277001f123898d16a7c/raw/instructions.md ':include')
148+
[gist: content.md](https://gist.githubusercontent.com/anikethsaha/f88893bb563bb7229d6e575db53a8c15/raw/content.md ':include')
140149
```
141150

142-
?> The `LABEL` can be any text you want. It acts fallback text if the link is broken - so it is useful to repeat the filename here in case you need to fix the link.
151+
Which renders as:
152+
153+
[gist: content.md](https://gist.githubusercontent.com/anikethsaha/f88893bb563bb7229d6e575db53a8c15/raw/content.md ':include')
143154

144155
### Render a codeblock from a gist
145156

146-
The format is the same as the previous section, but with `:type=code` added to the alt text at the end.
157+
The format is the same as the previous section, but with `:type=code` added to the alt text.
147158

148-
?> 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 the generic value of `code`.
159+
?> 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` set as `code`.
149160

150161
Here is the format:
151162

152163
```markdown
153164
[LABEL](https://gist.githubusercontent.com/USERNAME/GIST_ID/raw/FILENAME ':include :type=code')
154165
```
155166

156-
Using the example case, the element on your Docsify page would be:
167+
For example:
157168

158169
```markdown
159-
[gist: instructions.md](https://gist.githubusercontent.com/docsify/c2bece08f27c4277001f123898d16a7c/raw/instructions.md ':include :type=code')
170+
[gist: script.js](https://gist.githubusercontent.com/anikethsaha/f88893bb563bb7229d6e575db53a8c15/raw/script.js ':include :type=code')
160171
```
172+
173+
Which renders as:
174+
175+
[gist: script.js](https://gist.githubusercontent.com/anikethsaha/f88893bb563bb7229d6e575db53a8c15/raw/script.js ':include :type=code')
176+

0 commit comments

Comments
 (0)