The tool allows to embed code from Github on a webpage.
npm install --save github-embed babel-polyfill
;const githubEmbed = ;;
CSS is placed at node_modules/github-embed/npm/css/github-embed.css.
Bundled (downloadable) version and the demo of the tool lives at gh-pages branch.
githubEmbed function accepts two arguments: an element where embedding block will be mount (a selector, a node, jQuery instance etc) and settings object.
Settings object should include the following properties:
repo: STRINGa name of a repository whose files will be embedded
owner: STRINGan owner of the repo
ref: STRINGa branch, a tag or commit SHA
embed: ARRAYa list of embedded files
path: STRING- a path to embedded file relative to the root of the repo
type: STRING- a type of file you want to embed (a programming language)
label: STRING- what to display in navigation. By default it's a name of embedded file
active: BOOLEAN- is the item shown by default
repo: STRING- a name of a repository where current file lives (in case if you want to embed a file from another repo)
owner: STRING- an owner of a repo where current file lives (in case if you want to embed a file from another repo)
ref: STRING- a branch, a tag or commit SHA of a repo where current file lives (in case if you want to embed a file from another branch or repo)
There is one more thing: you can add to your embedding list any webpage. It could be useful if you want to show how does your web tool works. You need to set type option as
"htmlpage" and assign webpage URL to
In case if you want to embed your code on few places and you don't want to break something when a file path is changed (eg you have renamed
index.js) you can store embedding settings remotely inside a file next to embedded files. It allows to get your embedding always up to date and you'll need to modify it when paths are changed.
Usually I call settings file .gh-embed.json.
It should contain valid JSON object with data described above. The only difference: you don't need to specify
ref because these properties will be extracted from settings URL.
"embed":"type": "htmlpage""label": "Embedded HTML page""url": """type": "js""label": "Webpack config""path": "webpack.config.js""type": "js""label": "Entry point""path": "src/index.js""type": "json""path": ".gh-embed.json"