GitHub displays Markdown files so nicely, it’s a shame there is no print view where all the toolbars etc. are hidden. Note that printing doesn’t necessarily mean that paper is involved. For example, on Mac OS X, you can print to PDF files.
Nov 29, 2016 The GitHub Collapse Markdown script is there to make heading collapsible in preview but will not affect the rendering of the file where ever you finally process it, like GitHub, for example. So the two serve different functions and you can user either one or both as it suits your need. Collapsible Markdown #markdown. GitHub Gist: instantly share code, notes, and snippets. However, for security reasons, GitHub does not allow CSS or JavaScript from users on its site and therefore they strip all CSS and JavaScript out after rendering the Markdown to HTML. GitHub documents how they process user supplied markup in github/markup. As described in step 1 there, your Markdown is converted to HTML. However, in step 2.
This blog post explains three ways of printing Markdown files that are hosted on GitHub:
- Markdown tools: such as kramdown can be used to turn Markdown files into HTML files that can be printed.
- Safari’s Reader mode [1]: With many pages, Safari displays a “Reader” button in the address bar. Clicking it usually removes all clutter around content. You can print a page in Reader mode. Disadvantage of this solution (especially compared to the next one): You lose most of the syntax highlighting of source code.
- Bookmarklet [2]: Create a bookmark with the following URL, click it and everything around the content is removed.
javascript:var content = document. querySelector('article'); var body = document.querySelector('body'); body.innerHTML = '; body.appendChild(content);
The above approaches work, e.g., with project readme files. I’ve tested them with the following file: “ServiceWorkers Explained” by Alex Russell.References:
In this tutorial we will look at how to create a github style markdown editor with preview button. Github’s markdown editor is used to edit the README.md file. This file contains getting started information about the github repository.
Using EpicEditor
EpicEditor is a JavaScript Library which can embed a mardown editor in an webpage. In this tutorial we will build a Github style markdown tool using EpicEditor.
Download EpicEditor and place it in your demo project. This is how my demo project looks
Github Collapsible Markdown Game
-index.html
--epiceditor
--themes
--preview
-preview-dark.css
-github.css
-bartik.css
--editor
-epic-dark.css
-epic-light.css
--base
-epiceditor.css
--js
-epiceditor.min.js
-epiceditor.js
Create a Sample Editor
Github Collapsible Markdown Download
Here is the code for a sample markdown editor like Github style. With just 62 lines of code we created a editor like github’s.
<html>
<head>
<title>Github Style Markdown Editing Preview</title>
<scripttype='text/javascript'src='epiceditor/js/epiceditor.min.js'></script>
</head>
<body>
<buttononclick='preview();'>Preview</button>
<buttononclick='edit();'>Edit</button>
<divid='epiceditor'style='width: 600px; height: 600px; border: 2px solid black'></div>
<br>
<buttononclick='commit();'>Commit Change to Server</button>
<scripttype='text/javascript'>
var opts = {
container: 'epiceditor',
theme: {
base: '/themes/base/epiceditor.css',
editor: '/themes/editor/epic-light.css'
},
clientSideStorage: true,
file: {
name: 'README.md', //name of local file to open. Its not a real file but just localStorage item.
autoSave: 100 //saves the editor data into the local file every 100ms.
},
button: {
preview: false,
fullscreen: false,
bar: false
}
};
var editor = new EpicEditor(opts);
editor.load();
editor.importFile('README.md','#Last Commited Content'); //load file data from server for the last commit.
editor.preview();
function commit()
{
var theContent_html = editor.exportFile('README.md', 'html');
var theContent_md = editor.exportFile('README.md', 'text');
alert(theContent_md);
alert(theContent_html);
//here send data to server to update the file on server side.
}
function preview()
{
editor.preview();
}
function edit()
{
editor.edit();
}
</script>
</body>
</html>
Most of the code above is self explanatory.
Github Collapsible Markdown Table
A editor represents one file at a time. A file name (here it is README.md) is assigned to the editor. The markdown is stored/updated locally every 100ms. When user clicks the commit button you can retrieve the markdown of the file and send to server.
Github Collapsible Markdown Game
Whenever page is loaded you can retrieve the markdown of the file from server and load it into the local file using importFile function. Now the editor will show the server version of the file.