在 Blogger/blogspot 的内容中使用 markdown

查看相关主题:
群里有人讨论如何在blogger中使用markdown

思路

以前在 短链转markdown日记本 的方案中, 页面内容<textarea>中是markdown格式文本, 外面再挂一段简单的JS转换markdown到HTML.


实践

在blogger新建博文时, 切换到HTML视图.

把 markdown 文本粘进去. 举例如下,
- 演示视频  
https://www.youtube.com/watch?v=DZcXqyIm_R0


- 演示站  
https://journal.crazypeace.workers.dev/journaljournal


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


- 搭建过程  
https://www.nodeseek.com/post-58723-1


最后把这几行改一下就行. 第3行定义了操作页面. 第7行定义了保存key-value时,是否检验已经存在key. 第11行定义了一些系统的行为.


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


对了, Markdown 要用到图床, 可以用这个 https://www.nodeseek.com/post-60815-1
发布为正式博文. 

然后查看此页面的源码, 发现正文的html部分有class为 post-body entry-content
class='post-body entry-content' 

在 blogger 的 主题背景 - 修改HTML 

添加如下 JS 内容.
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>


<script>
document.addEventListener('DOMContentLoaded', function() {
  // 获取所有具有 "post-body" 类的元素的第1个, 也就是博文的正文
  const blogContent = document.getElementsByClassName("post-body")[0];
  // 获得markdown文本
  const markdownContent = blogContent.textContent;
  // 转换为html再放到博文正文内容
  blogContent.innerHTML = marked.parse(markdownContent);
});  

</script>

保存

========

完


放到了 Github

你可以这样使用
<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'/>

========

后记

我的博客并不是纯markdown的内容, 我还是希望以我原有的使用方式为主.

所以我建了一个演示站

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



Comments
Post a Comment