• Translate

7/20/2017

Tutorial Create HTML Live Editor With GitHub Hosting

Tutorial Blogspot | Tutorial Web Design |

Advertisement

Tutorial Create HTML Live Editor With GitHub Hosting
Knowing HTML, CSS, and Javascript is something that is needed as part of a supporting factor of a Blogger. This is useful when a blogger makes a valid post HTML5 or to simply install widgets from third parties or pairing ad code on blogs.

As my experience does not have basic knowledge of coding, to be able to understand the coding required a lot of practice. For a lot of material available on Google, we just try to apply it on our blog. With the more often we try to apply the coding tutorials, then we will be more familiar with the coding itself. Especially if we want to try to modify the appearance, essentially brave trial and error.

In addition to trying to apply the coding tutorials directly on the blog, we can also use the playground code that many provided on the internet such as JsFiddle, Codepen, and others.

Well now I will share how to create HTML Live Editor or own playground code by utilizing hosting GitHub. The source code of this Live Editor HTML comes from Github which I modified a bit by replacing the button icons with the Awesome Font.

With HTML Live Editor, you can do several things, including:
  • Changing theme syntax highlighter editor, using Bootstrap and Foundation framework, and others by right-clicking on its editor.
  • Download the generated HTML file which can then be hosted to view it live in the browser.
  • Save the job in localStorage to load later (as long as the cache is not cleared).
  • Comes with toggle editor and popup live preview.
How would you like to try hosting this HTML Live Editor yourself for yourself? Please follow the steps below.

1. The first step

Please download the file in the download link below then extract the rar file obtained.

DOWNLOAD | size:1.18MB

2. Step Two

Please log in to your GitHub account. Then click the New Repository button and select Public, check Initialize this repository with a README. Then press the create repository button.
New Repository
  

3. Third Step

Then Upload the CloudEdit folder into your GitHub. Or please fork the following repo: HTML Live Editor.

If you want to edit something like Title, meta description or H1 and others please first edit the htmleditor.html file with Adobe Dreamweaver or Notepad in the CloudEdit folder.  

4. Step four

After all according to your wishes, please right click and copy the link file htmleditor.html, because we need is link htmleditor.html.
right click and copy the link file htmleditor.html

5. Step five

Well, the link we copied earlier please paste it to the site http://rawgit.com/, so we get a link that can be accessed by all users to use HTML Live Editor.
paste it to the site http://rawgit.com/

Please access your htmleditor with links generated by RawGit, as my htmleditor can be accessed in the EDITOR HTML link in the Online Tools menu above.

Good luck and hopefully useful.
Source code: https://github.com/TheInsomniac/CloudEdit

Disqus
Blogger
Comment
How to style text in Disqus comments Top Disqus Commentators
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>, and please parse the code in the parser box below.
Show Parser Box

No comments Add Comment

Comments not appropriate topic will sign SPAM.