tnblog
首页
视频
资源
登录
什么时候才能领悟,取之越多失之越多
排名
5
文章
229
粉丝
15
评论
7
ICP备案 :渝ICP备18016597号-1
网站信息:2018-2025TNBLOG.NET
技术交流:群号656732739
联系我们:contact@tnblog.net
公网安备:50010702506256
欢迎加群交流技术

Markdown转HTML的显示处理

6119人阅读 2020/4/3 14:59 总访问:1166320 评论:0 收藏:0 手机
分类: 前端
方法1 : 数据库保存转化好的html格式,前台直接显示

markdwon编辑器在后台可以,获取html格式的代码,然后前台直接拿来用html编码显示即可。
但是代码样式和预览的样式有一些问题。不一样,所以在考虑前台要不要直接用markdown的语法在解析一次

  • 嘿嘿
  • 嘿嘿

一盏灯, 一片昏黄; 一简书, 一杯淡茶。 守着那一份淡定, 品读属于自己的寂寞。 保持淡定, 才能欣赏到最美丽的风景! 保持淡定, 人生从此不再寂寞。

方法2 : 数据库保存markdown的语法,然后前台把markdown的语法解析在显示,这样虽然要对解析一次效率会浪费一些,但是保持和预览效率一致,安全性也更高

可以参考源码demo中的:Markdown to HTML for preview

第一步:就是把markdown语法的内容按格式放好

然后把MarkDown格式的语法转化成html格式,也就是预览效率那种即可

  1. //获取浏览器高度
  2. function findHeigt() {
  3. var winHeight = 0;
  4. //获取窗口高度
  5. if (window.innerHeight)
  6. winHeight = window.innerHeight;
  7. else if ((document.body) && (document.body.clientHeight))
  8. winHeight = document.body.clientHeight;
  9. return winHeight;
  10. }

欢迎加群讨论技术,1群:677373950(满了,可以加,但通过不了),2群:656732739。有需要软件开发,或者学习软件技术的朋友可以和我联系~(Q:815170684)

评价

使用Markdown编辑器editormd图片上传

静态资源路径问题可以参考:https://www.tnblog.net/aojiancc2/article/details/3436自定义工具栏可以参考:https://www.tn...

Markdown预览效果优化,差点哭出声的艰辛历程

其实要实现的效果很简单就是想写文章的时候能即时预览效果,但是自带的会出现看不到的情况,且回车也无法改变这种现象。熬...

扩展Markdown增加mermaid支持画图

我看网上没有什么资料,只有说怎么去用它,没有说怎么才能用它。那就自己慢慢研究在让markdown支持,要自己实现这个必须要...

.NETCore配置Markdown的学习之路 (一)

前言MarkDown讲述 (开始使用)现在很多人都自己开发一个博客平台分享技术,老程序员都说干程序员如果没有开发出来一个...

tnblog Markdown画图

tnblog画图graph LR;   A-->B;   A-->C;   B-->D;sequenceDiagram participant Alice participant Bob ...

关于tnblog Markdown

我们对markdown进行了深度的优化和高度的自定义功能比如更人性化的即时预览效果扩展语法等并且持续不断的完善优化中tnlog m...

Asp.NET使用Markdown上传图片

初始化富文本编辑器就不写了,初学者去看这篇文章.NETCore配置MarkDown的学习之路 (一)前台代码配置imageUploadURL属性并且...

Markdown中mermaid画图解析失败

报错:Parse error on line 17:...ockquote><h3 id="h3-u6570u5B57u8BA4u8BC其实就是htmlDecode的配置问题,就...

Markdown编辑器editormd设置内容,获取内容追加内容

这些东西网上搜半天都搜不到,只有自己分析源码了,所以还是要靠自己。找到下面4个方法。可以参考一下。 setMarkdown,set...

XAF生成Markdown

usingDevExpress.ExpressApp.DC; usingDevExpress.ExpressApp.Model; usingDevExpress.Persistent.Validation; usingJGS...

Markdown语法示例

[TOC]Markdown简介 Markdown 是一种轻量级标记语言,它允许人们使用易读易写的纯文本格式编写文档,然后转换成格式丰富的H...

Markdown常用语法

MarkDown 一些语法删除线~~content~~ Content # 任务清单- [x] Checked - [ ] ReChecked Checked[ ] ReChecked...

editormdMarkdown 自定义导航栏按钮

editormd,markdown 自定义导航栏按钮可以通过修改源代码来实现,但是没有必要那么麻烦。 editormd本身就有增加自定义按钮...

Markdowneditormd编辑器Editor.md自动保存插件的开发

简介: Markdown编辑器Editor.md自动保存插件的开发。文章编辑器没有自动保存功能怎么行,万一不小心忘记保存不就辛苦白费了...

editormd,Markdown编辑器Editor.md图片粘贴插入插件的开发

Markdown编辑器Editor.md图片粘贴插入的开发。最近发现编辑器图片上传很不方便,不能像其他编辑器一样粘贴插入图片,就着手...
两个人从监狱的窗户往外看,一个看见了土地,一个看见了星星。