异想天开

What's the true meaning of light, Could you tell me why

博客大事记,后台支持markdown书写

日期:2017-10-04 17:20:11
  
最后更新日期:2017-10-16 23:26:31

老早就想过后台支撑markdown格式,否则用博客来做文字记录时,当你想制作一个表格的效果时,总有一种写html的感觉。markdown的优劣也不多说。记录一下,怎么实现后台支撑markdown格式。 大概流程为:前端用一个html页面,用textarea标记把文章内容提交到后台;后台用php调用markdown格式转换命令pandoc,将markdown转化为html。为了实时预览markdown转换为html效果,用了两个frame,一个frame为后台编辑页面,另外一个frame为预览页面,定时将textarea的内容提交后台,生成html预览。

实现上诉逻辑时,有一个坑是没有料想到的。例如当你用markdown书写一个表格形式时,

markdown表格

markdown表格

结果发现到了后台,把上传的内容写到文件,然后用vim再打开时,发现列与列之间没有对齐了。

宽字体显示

宽字体显示

而空格和字符数目并没有变化,立马想到是字符宽度变化了。linux下每个汉字和英文字符的宽度,肉眼观察是一样的,汉字的宽度也似乎总是等个两个英文字符的宽度。说白了,linux下面使用的等宽字符。后面根据参考1,解决办法将textarea标记嵌套在code标记内部: [code lang="cpp"] <code><textarea></textarea></code> [/code] 同时注意textarea不要显式使用非等宽字体,否则textarea里面的文字就不会显示为等宽字体了。 好了,现在可以愉快地使用markdown来书写文字了。

1.html等宽字体