Skip to content

Commit c3d0d0d

Browse files
docs: Add embed gist instructions to Embed Files (fixes #932 ) (#1238)
* Clarify embed file explanations * Add Embed a gist section * Update gist instructions * Fix grammar errors and clarify notes around gists * Add real gist to embed-files.md * Clean up embed-files.md
1 parent 13f91a4 commit c3d0d0d

File tree

1 file changed

+84
-6
lines changed

1 file changed

+84
-6
lines changed

Diff for: docs/embed-files.md

+84-6
Original file line numberDiff line numberDiff line change
@@ -1,41 +1,44 @@
11
# Embed files
22

33
With docsify 4.6 it is now possible to embed any type of file.
4+
45
You can embed these files as video, audio, iframes, or code blocks, and even Markdown files can even be embedded directly into the document.
56

6-
For example, here embedded a Markdown file. You only need to do this:
7+
For example, here is an embedded Markdown file. You only need to do this:
78

89
```markdown
910
[filename](_media/example.md ':include')
1011
```
1112

12-
Then the content of `example.md` will be displayed directly here
13+
Then the content of `example.md` will be displayed directly here;
1314

1415
[filename](_media/example.md ':include')
1516

1617
You can check the original content for [example.md](_media/example.md ':ignore').
1718

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

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+
2023
## Embedded file type
2124

22-
Currently, file extension are automatically recognized and embedded in different ways.
25+
Currently, file extensions are automatically recognized and embedded in different ways.
2326

24-
This is a supported embedding type:
27+
These types are supported:
2528

2629
* **iframe** `.html`, `.htm`
2730
* **markdown** `.markdown`, `.md`
2831
* **audio** `.mp3`
2932
* **video** `.mp4`, `.ogg`
3033
* **code** other file extension
3134

32-
Of course, you can force the specified. For example, you want to Markdown file as code block embedded.
35+
Of course, you can force the specified type. For example, a Markdown file can be embedded as a code block by setting `:type=code`.
3336

3437
```markdown
3538
[filename](_media/example.md ':include :type=code')
3639
```
3740

38-
You will get it
41+
You will get:
3942

4043
[filename](_media/example.md ':include :type=code')
4144

@@ -91,3 +94,78 @@ Embedding any type of source code file, you can specify the highlighted language
9194
[](_media/example.html ':include :type=code text')
9295

9396
?> How to set highlight? You can see [here](language-highlight.md).
97+
98+
## Embed a gist
99+
100+
You can embed a gist as markdown content or as a code block - this is based on the approach at the start of [Embed Files](#embed-files) section, but uses a raw gist URL as the target.
101+
102+
?> **No** plugin or app config change is needed here to make this work. In fact, the "Embed" `script` tag that is copied from a gist will _not_ load even if you make plugin or config changes to allow an external script.
103+
104+
### Identify the gist's metadata
105+
106+
Start by viewing a gist on `gist.github.com`. For the purposes of this guide, we use this gist:
107+
108+
- https://gist.github.com/anikethsaha/f88893bb563bb7229d6e575db53a8c15
109+
110+
Identify the following items from the gist:
111+
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.
117+
118+
You will need those to build the _raw gist URL_ for the target file. This has the following format:
119+
120+
- `https://gist.githubusercontent.com/USERNAME/GIST_ID/raw/FILENAME`
121+
122+
Here are two examples based on the sample gist:
123+
124+
- https://gist.githubusercontent.com/anikethsaha/f88893bb563bb7229d6e575db53a8c15/raw/content.md
125+
- https://gist.githubusercontent.com/anikethsaha/f88893bb563bb7229d6e575db53a8c15/raw/script.js
126+
127+
?> Alternatively, you can get a raw URL directly clicking the _Raw_ button on a gist 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.
128+
129+
Continue with one of the sections below to embed the gist on a Docsify page.
130+
131+
### Render markdown content from a gist
132+
133+
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. This approach works equally well with a gist owned by your account or by another user.
134+
135+
Here is the format:
136+
137+
```markdown
138+
[LABEL](https://gist.githubusercontent.com/USERNAME/GIST_ID/raw/FILENAME ':include')
139+
```
140+
141+
For example:
142+
143+
```markdown
144+
[gist: content.md](https://gist.githubusercontent.com/anikethsaha/f88893bb563bb7229d6e575db53a8c15/raw/content.md ':include')
145+
```
146+
147+
Which renders as:
148+
149+
[gist: content.md](https://gist.githubusercontent.com/anikethsaha/f88893bb563bb7229d6e575db53a8c15/raw/content.md ':include')
150+
151+
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. It also makes an embedded element easy to read at a glance.
152+
153+
### Render a codeblock from a gist
154+
155+
The format is the same as the previous section, but with `:type=code` added to the alt text. 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`.
156+
157+
Here is the format:
158+
159+
```markdown
160+
[LABEL](https://gist.githubusercontent.com/USERNAME/GIST_ID/raw/FILENAME ':include :type=code')
161+
```
162+
163+
For example:
164+
165+
```markdown
166+
[gist: script.js](https://gist.githubusercontent.com/anikethsaha/f88893bb563bb7229d6e575db53a8c15/raw/script.js ':include :type=code')
167+
```
168+
169+
Which renders as:
170+
171+
[gist: script.js](https://gist.githubusercontent.com/anikethsaha/f88893bb563bb7229d6e575db53a8c15/raw/script.js ':include :type=code')

0 commit comments

Comments
 (0)