Tontuf TWL

Home
blogger

Add a HTML Code Editor into your Blogger post

Spice Up Your Blogger Posts: Adding a Sleek HTML Code Editor
3
Add a HTML Code Editor into your Blogger post

Blogger offers a great platform for sharing your thoughts and creations with the world. But sometimes, plain text just doesn't cut it, especially when you're dealing with code snippets or want to showcase your programming prowess. This is where adding an HTML code editor to your blog post comes in handy.

Think of it as a mini IDE within your blog post, allowing you to display code with proper syntax highlighting, line numbers, and even the ability to run the code for interactive demonstrations. In this comprehensive guide, we'll explore various ways to add an HTML code editor to your Blogger post, catering to different comfort levels and technical skills.

Method 1: Using Third-Party Code Editors:

This is the simplest approach, perfect for beginners who don't want to mess with code. Several online services offer embeddable code editors that you can easily integrate into your blog post:

  • Carbon: This popular platform provides stunning code visualization with diverse themes and supports over 80 programming languages. Simply paste your code, choose your settings, and copy the embed code to insert into your Blogger post.
  • Shiftit: Another user-friendly option, Shiftit boasts robust features like line wrapping, zoom controls, and even theme customization. Just like Carbon, paste your code, generate the embed code, and add it to your post.
  • Prism.js: For those comfortable with adding JavaScript libraries, Prism.js is a powerful option. It offers extensive customization and supports a vast array of languages. You'll need to integrate the library and CSS files into your Blogger template and then write the HTML code for the editor container.

Method 2: Manually Coding Your Own Editor:

For more advanced users who enjoy control and customization, consider building your own editor using HTML, CSS, and JavaScript. This method gives you complete freedom over features, aesthetics, and language support.

  • Libraries like CodeMirror and Ace Editor: These open-source libraries provide the core functionality for your editor, offering syntax highlighting, line numbers, and basic editing tools. You'll need to integrate these libraries with your own custom CSS and JavaScript to create the desired look and feel.
  • Standalone JavaScript plugins: Several plugins like Highlight.js and Google Prettify specialize solely in syntax highlighting. You can combine these plugins with your own HTML and CSS to create a basic code editor without the full functionalities of CodeMirror or Ace Editor.
Here's a simple code of an Online HTML Compiler which is being used on TONTUF Tools. You can copy and paste this below code into your Blogger post (in HTML View).

<!--JQuery-->

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>

<!--CSS Style-->

<style type="text/css">
br { display: none; }
 textarea{display: block;margin: 10px 0; width:100%; border: 1px solid #333;}
 
 iframe{display: block;margin: 10px 0; width:100%; resize:both; overflow: auto; border: 1px solid #333;}
</style>

<!--JavaScript-->

<script type="text/javascript">
 function updateIframe(){
 var myFrame = $("#myframe").contents().find('body');
 var textareaValue = $("textarea").val();
 myFrame.html(textareaValue);
 }
</script>

<textarea cols="50" rows="5"></textarea>

<button onclick="updateIframe()" style="border: 1;" type="button"><i class="fa fa-pencil-square-o"></i>Run This Code</button>

<iframe id="myframe"></iframe>

Tips for Success:

  • Choose the right method based on your skills and needs. Don't dive into manual coding if you're a beginner, and don't settle for limited features if you're comfortable with code.
  • Clearly format your code snippets. Regardless of the method you choose, ensure your code is properly indented and spaced for better readability.
  • Provide context and explanation. Don't just throw the code at your readers. Explain its purpose, functionality, and relevance to your blog post.
  • Test and adjust. Always test your code editor on different devices and browsers before publishing your post.

Adding an HTML code editor to your Blogger post can elevate your content, engage your tech-savvy audience, and showcase your coding skills. By choosing the right method and following these tips, you can easily integrate this powerful tool into your blog and take your content to the next level.

We hope this comprehensive guide provides you with everything you need to add a dazzling HTML code editor to your Blogger posts. Remember, experimentation and customization are key, so have fun and let your creativity shine!

OLD Tutorial Video (in Hindi)