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.
- Github Markdown Collapsible Block
- Github Collapsible Markdown Box
- Github Collapsible Markdown Download
- Github Markdown Collapsible Section
Your comment is accurate but I think its the fact that GitHub styles it in that way. I do wish it was possible to use markdown-types of elements in this way so that it could fallback on non-GitHub rendered web pages, or still look good in a text editor vs. HTML tags all over the place. A collapsible section is made of a title and some content that's initially hidden and appears when it's clicked. It requires two tags:! for the title and!@ for the end of the content. The content can contains markdown by itself.! My section ### Whatever markdown you need Lorem ipsum dolor sit amet, consectetur adipiscing elit. Convert markdown to html with inlined styles using github-markdown-css. Best app to free up space on android.
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. Argon and helium. This is how my demo project looks
-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
Github Markdown Collapsible Block
Create a Sample Editor
Github Collapsible Markdown Box
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.
A editor represents one file at a time. A file name (here it is README.md) is assigned to the editor. Knives out american airlines. 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 Download
Github Markdown Collapsible Section
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.
