QNimate

  • CoursesVideos
  • WP PremiumPlugins
  • DemosLab
  • Home
  • QIdea
  • QTrack
Home Carbon Ads Github Style Markdown Editor and Preview

Github Style Markdown Editor and Preview

code-editor

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

View Demo

<!doctype html>
<html>
    <head>
        <title>Github Style Markdown Editing Preview</title>

        <script type="text/javascript" src="epiceditor/js/epiceditor.min.js"></script>
    </head>
    <body>
        <button onclick="preview();">Preview</button>
        <button onclick="edit();">Edit</button>

        <div id="epiceditor" style="width: 600px; height: 600px; border: 2px solid black"></div>
        <br>
        <button onclick="commit();">Commit Change to Server</button>

        <script type="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.

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.

Jan 27, 2015Narayan Prusty
Anti Adblock Plugin for WordPressJavaScript Vibration API with Demo
Comments: 1
  1. Keyla
    5 years ago

    Th;#3t&9as great that you cut out soda and realize it is the devil! Lol! I think its great that you like working out at home, that's a huge issue of mine. I really just like being with my friends in a group setting

    ReplyCancel

Leave a Reply to Keyla Cancel reply

To create code blocks or other preformatted text, indent by four spaces:

    This will be displayed in a monospaced font. The first four
    spaces will be stripped off, but all other whitespace
    will be preserved.
    
    Markdown is turned off in code blocks:
     [This is not a link](http://example.com)

To create not a block, but an inline code span, use backticks:

Here is some inline `code`.

For more help see http://daringfireball.net/projects/markdown/syntax

Narayan Prusty

I am a software engineer specialising in Blockchain, DevOps and Go/JavaScript. This is my personal blog where I write about things that I learn and feel interesting to share.

Image7 years ago 1 Comment Web Development
Share this
0
GooglePlus
0
Facebook
0
Twitter
0
Linkedin
  • Using EpicEditor
  • Create a Sample Editor
Related Articles
  • Create an Frontend Editor with Code Highlighting and Execution
  • Creating a WYSIWYG Editor
  • How to use Github Hosted CSS and JS Files in Your Website
  • Writing Vendor Prefix Free CSS Code
  • npm Tutorial For Non Node.js Developers
Our Sponsor
My Books

2014 - 2015 © QNimate
All tutorials MIT license