Github Collapsible Markdown

  
Github

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. Imessage mms cost.

Using EpicEditor

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. GitHub Flavored Markdown GitHub.com uses its own version of the Markdown syntax that provides an additional set of useful features, many of which make it easier to work with content on GitHub.com. Note that some features of GitHub Flavored Markdown are only available in the descriptions and comments of Issues and Pull Requests. How to add a collapsed block with any data. There exsists a github repo does what you want: szhielelp/md-post-header-collapse. A jquery tool to make header collapsible in markdown post. Nov 29, 2016 The GitHub Collapse Markdown is a script for collapsing headers. Will be really nice when I implement persistence for the state of each header. Until then it is more of a gimmick than a useful feature. The Details tag opener is a script which ensures that all detail tags are open after preview is refreshed.

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-markdown
-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

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.

Github

Github Collapsible Markdown Table

GithubGithub Collapsible Markdown
<!doctype html>
<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.

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 Commands

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.