56

Is there a way of embedding the content of a file (from the projects repo) in Githubs markdown?

I have a code sample and want to embed it in the projects readme.

5
  • sorry, my english is not that good. Do you want to put a piece of code in the readme which is in Markdown format, is that it ? Commented Apr 24, 2012 at 14:45
  • 2
    @BernardoFire no. I want to link to a checked in code file and have the contents of that file rendered when the markdown is viewed Commented Apr 25, 2012 at 4:41
  • Check this link. Looks like there is a jquery plugin for showing an entire repo in a website. stackoverflow.com/questions/9316499/… Commented Dec 30, 2014 at 3:20
  • The ability to do this would allow greatly improved github READMEs, more correctness and less maintenance. I get that its non-trivial, but cmon Microsoft, you can do this! Commented Feb 20, 2021 at 0:24
  • 1
    If you want to try something for documentation outside of Github, Sourcegraph has private or public Notebooks that are basically markdown with really nice embedded code blocks and hyperlinking. Example: Tour de Source of Caddy Commented Jul 8, 2022 at 20:19

7 Answers 7

21

UPDATE:

It turns out this is now possible if you paste a permalink of the code in your README.md file.

To figure out how to get the permalink, check GitHub's docs on the topic. The permalink and the README.md needs to be in the same repository.

OLD ANSWER:

You can't do that currently. You will have to copy your code sample and paste it between triple ticks in your README file. Here is an example:

``` Ruby
class MyClass
end
```

This will be static of course and you must update it manually when that code changes.

Sign up to request clarification or add additional context in comments.

7 Comments

is this still the case in 2017?
Late 2020 checking in -- still the case? Has Microsoft come to the rescue here? My guess, it being 2020, is no.
@ArnaudBecheler this is a nice pointer to the fact GitHub Actions can be used to keep parts of your content dynamic like that. The GitHub Action needs to work of course, and if it doesn't there may be something with the setup or even a bug in how the action behaves. I may need to update my original answer 😃.
Thank you Petros :) The github actions I previously refered to (markdown-embed-code-from-file) did not work for me, but I found another action (mardown-autodocs) that does the job perfectly (even if a bit more verbose). I explained it in my answer!
Aug 2022 edit. Please see Utkarsh's answer below for correct answer
|
20

@Petros's answer is (still) correct, however I got annoyed enough with this that I've created a tool to automate the copying and keep your readme synchronised with the source - https://github.com/zakhenry/embedme

Example usage from the accepted answer

Insert a comment into the code fence

```rb
# path/to/your/file.rb
```

Run npx embedme README.md (this assumes you have Nodejs installed)

The README will be written in-place, with the content of the file following your comment

```rb
# path/to/your/file.rb
class MyClass
end
```

Note that as the comment is still there, you can happily re-run npx embedme README.md again and it won't make any change.

If you have CI, you can also run npx embedme --verify README.md which will return 1 if it detects a diff (this would mean that the source was updated without the readme being updated).

Comments

12

Github now supports rendering permalink in markdown files. example - https://github.com/stevemar/code-reference-in-readme

credit: https://www.stevemar.net/github-code-in-readme/

2 Comments

found the same result searching...is there a way to do this so it renders in VSCode's markdown preview as well as in github once uploaded?
Despite what GitHub docs suggest this doesn't seem to work if you use a branch name rather than a commit hash.
6

If you are willing to use github actions, I found Markdown autodocs on Github Marketplace to work for my project.

All you have to do is to add a line in your .github/workflows/your-workflow.yml file:

uses: dineshsonachalam/[email protected]

Then insert these snippets in your Markdown files:

<!-- MARKDOWN-AUTO-DOCS:START (CODE:src=./relative/path/to/code.js) -->
<!-- MARKDOWN-AUTO-DOCS:END -->

I also like the fact that it allows for remote files to be used:

<!-- MARKDOWN-AUTO-DOCS:START (CODE:src=https://raw.githubusercontent.com/username/project/master/path/to/file) -->
<!-- MARKDOWN-AUTO-DOCS:END -->

And also the fact that you can restrict the number of lines printed:

<!-- MARKDOWN-AUTO-DOCS:START (CODE:src=https://raw.githubusercontent.com/username/project/master/path/to/file&lines=1-42) -->
<!-- MARKDOWN-AUTO-DOCS:END -->

1 Comment

It's a shame that github.com/marketplace/actions/markdown-embed-code-from-file doesn't work, since the syntax is more pleasant. But at least there's something we can use.
1

Not a direct answer, since GFM doesn't support includes, but I keep a list of projects I found that let you include things with a preprocessing step to produce the final markdown file: realazthat/snipinator: Related Projects.

Disclosure: I wrote snipinator.

Not complete, and not necessarily up to date. Make a PR to README.md.jinja, (see realazthat/snipinator/Contributions) to insert/modify the table, and edit this answer.

Project Stars Last Update Language Platform Similarity X Obviousness
mdx-js / mdx 16.8k 2024/04/17 JS N/A ⭐⭐⭐⭐⭐
fletcher / MultiMarkdown-6 599 2023/12/30 C CLI ⭐⭐⭐⭐⭐
gajus / gitdown 448 2022/03/01 JS CLI ⭐⭐⭐⭐⭐
gpoore / codebraid 362 2023/10/17 Python CLI ⭐⭐⭐⭐⭐
amyreese / markdown-pp (archived) 307 2021/09/02 Python CLI ⭐⭐⭐⭐⭐
zakhenry / embedme 222 2023/11/08 JS CLI ⭐⭐⭐⭐⭐
DCsunset / pandoc-include 62 2024/04/30 Python Pandoc / CLI ⭐⭐⭐⭐⭐
BurdetteLamar / markdown_helper 38 2020/03/16 Ruby CLI ⭐⭐⭐⭐⭐
SimonCropp / MarkdownSnippets 23 2024/04/23 .NET CLI ⭐⭐⭐⭐⭐
endocode / snippetextractor 4 2014/08/16 C++ CLI ⭐⭐⭐⭐⭐
polywrap / doc-snippets 3 2023/09/26 JS CLI ⭐⭐⭐⭐⭐
hxtmike / markdown_include 2 2024/05/09 Python CLI ⭐⭐⭐⭐⭐
JulianCataldo / remark-embed 2 2022/09/22 JS JS / library ⭐⭐⭐⭐⭐
xrd / oreilly-snippets 2 2015/10/15 Ruby Ruby / library ⭐⭐⭐⭐⭐
DamonOehlman / injectcode 1 2021/08/01 JS CLI ⭐⭐⭐⭐⭐
electrovir / markdown-code-example-inserter 1 2024/02/19 JS CLI ⭐⭐⭐⭐⭐
andersfischernielsen / Simple-Embedded-Markdown-Code-Snippets 1 2021/02/12 JS CLI ⭐⭐⭐⭐⭐
ildar-shaimordanov / git-markdown-snippet 0 2021/09/14 Perl CLI ⭐⭐⭐⭐⭐
teyc / markdown-snippet 0 2024/01/22 Powershell Powershell / function ⭐⭐⭐⭐
marc-bouvier-graveyard / baldir_markdown 0 2020/06/15 Python CLI ⭐⭐⭐⭐⭐
facelessuser / pymdown-extensions (snippets) 903 2024/05/05 Python Python / PyMarkdown ⭐⭐⭐⭐
dineshsonachalam / markdown-autodocs 176 2022/09/19 JS GH Action ⭐⭐⭐⭐
sethen / markdown-include 148 2017/10/26 JS CLI+config ⭐⭐⭐⭐
cmacmackin / markdown-include 95 2023/02/07 Python Python / library ⭐⭐⭐⭐
tokusumi / markdown-embed-code 28 2022/01/05 Python GH Action ⭐⭐⭐⭐
sammndhr / gridsome-remark-embed-snippet 2 2021/06/14 JS Gridsome ⭐⭐⭐⭐
NativeScript / markdown-snippet-injector 4 2019/01/24 JS CLI ⭐⭐⭐⭐
fossunited/markdown-macros 0 2021/06/10 Python Python / Python-Markdown ⭐⭐⭐⭐
fuxingloh / remark-code-import-replace 0 2022/12/21 JS Remark? ⭐⭐⭐⭐
szkiba / mdcode 15 2014/02/12 Go CLI ⭐⭐⭐
devincornell/pymddoc 0 2023/12/01 Python Python ⭐⭐⭐
shiftkey / scribble (docs) 40 2013/08/08 .NET CLI ⭐⭐
calebpeterson / jest-transformer-test-md 2 2020/08/21 JS Jest Tests ⭐⭐
tjstankus / commitate 0 2014/05/29 Ruby CLI
GitHub Docs: Creating a permanent link to a code snippet N/A N/A N/A GitHub
javierfernandes / markdown-exercises 1 2017/05/01 JS N/A
gatsby-remark-embed-snippet N/A (55k) 2024/01/23 JS Gatsby
ARMmbed / snippet (docs) 6 2021/08/05 Python CLI
drewavis / markdowninclude 1 2024/04/06 JS VSCode Extension ?
romnn / embedme 0 2024/04/18 Go N/A

Comments

1

I created a tool that keeps your code snippets up to date in Readme:) it can be used either as 🪝 pre-commit hook or as a Github action, and it supports whole scripts, sections of scripts and 🐍 Python objects. It’s extremely easy to use, feel free to check it out! https://github.com/kvankova/code-embedder

Comments

-2

You could write a script that will load the source code from a public repo and then show it within the container. Here is an example of an MD file which loads data from github and displays that within a container.

## Welcome to the Simple Alarm Server Example
This page will load and show a code example. 


<div id="code-element"></div>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
      axios({
      method: 'get',
      url: 'https://raw.githubusercontent.com/iotify/nsim-examples/master/functional-testing/alarm-server.js'
       })
      .then(function (response) {
         document.getElementById("code-element").innerHTML = response.data;
      });
</script>

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.