Use Markdown in Blogger Posts with HTML Editor

Someone in the group was discussing how to use Markdown in Blogger

Approach

In the previous solution URL Shorten Worker - NetJournal Markdown, the page content was Markdown-formatted text inside a <textarea>, with a simple JS script attached on the outside to convert Markdown to HTML.

In Practice

When creating a new post in Blogger, switch to the HTML view.

Paste the Markdown text in. For example,

- Demo video  
https://www.youtube.com/watch?v=DZcXqyIm_R0


- Demo site  
https://journal.crazypeace.workers.dev/journaljournal


- Github  
https://github.com/crazypeace/url-Shorten-Worker/


- Setup process  
https://www.nodeseek.com/post-58723-1


Finally, just modify a few lines. Line 3 defines the operation page. Line 7 defines whether to check if the key already exists when saving key-value pairs. Line 11 defines some system behaviors.


![](https://imghost.crazypeace.workers.dev/chrome_2024-02-05_03-34-50.png)


By the way, Markdown requires an image hosting service. You can use this one https://www.nodeseek.com/post-60815-1

Publish it as a formal post. 

Then view the source of this page and you will find that the HTML part of the post body has the class post-body entry-content

class='post-body entry-content' 

In Blogger, go to Theme - Edit HTML 

Add the following JS content.

<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>


<script>
document.addEventListener('DOMContentLoaded', function() {
  // Get the first element with the "post-body" class, which is the body of the post
  const blogContent = document.getElementsByClassName("post-body")[0];
  // Get the markdown text
  const markdownContent = blogContent.textContent;
  // Convert to HTML and put it back into the post body
  blogContent.innerHTML = marked.parse(markdownContent);
});  

</script>

Save

========

Done

I've put it on Github

https://github.com/crazypeace/blogger-replace-markdown-text-html

You can use it like this

<script src='https://cdn.jsdelivr.net/npm/marked/marked.min.js'/>
<script src='https://crazypeace.github.io/blogger-replace-markdown-text-html/blogger-replace-markdown-text-html.js'/>

========

Postscript

My blog is not entirely Markdown-based. I still want to stick with my original way of using it.

So I built a demo site

https://use-markdown-in.blogspot.com/2024/10/markdown-demo.html