今天尝试了一下在线使用Markdown编辑器写博客,发现想要实现下面这样的效果还真得折腾一会儿。

<html>
<head>
<meta charset="utf-8" />
<title>固定宽度的圆角</title>
<link rel="stylesheet" type="text/css" href="test.css">
</head>
<body>
<div class="midground">
<div class="foreground">
<p>Your content will go here!</p>
</div>
</div>
</body>
</html>

可以看到,在将设置默认编辑器选为"Markdown"之后,就没有插入代码的选择项了,我便开始了摸索的过程。



刚开始我按照语法,直接把代码粘贴在了两个反引号之间,效果显示如下:

`

固定宽度的圆角

Your content will go here!

`

=_=不想吐槽了。然后又折腾了老半天,终于弄出上面那样的效果,具体格式:

如果有哪行没有按照格式写,那么就会出现下面这样的情况:

固定宽度的圆角

Your content will go here!

很奇怪有木有,直接执行了代码(PS:发现这点之后我就去看了一些关于XSS攻击的知识,各种尝试,没有成功,应该是因为我写的那些意图比较明显,全被过滤或者禁止掉了,等学高级点再试)。在编辑器里是写成这样的:

刚开始都拿反引号包住代码,后来发现反引号没有消失,尝试删了一下,没有出现问题,就酱紫了!

使用Markdown在博客里插入代码的更多相关文章

  1. 新功能发布!Markdown写博客!

    有一种神奇的语言,它比html还简单,它巧妙地将内容与格式整合在一起--它就是Markdown. 现在我们实现了博客对Markdown的内置支持,可以让您轻松地在园子里用这个神奇的语言写博客! &qu ...

  2. 使用Scribefire在博客中插入语法高亮

    效果如下, 文字1 int cool void main() { cout<<"hello world!"<<endl } 文字2 经过一番折腾,终于搞定了 ...

  3. github page博客里添加多说评论插件

    本文来自我的github pages博客http://galengao.github.io/ 即www.gaohuirong.cn 摘要: 由于现在我这个博客原来用的是DISQUS评论插件,那全是全球 ...

  4. 用markdown写博客

    目录 用markdown写博客 前言 标题 段落 引用区块 代码块 列表 分隔线 链接 强调.加粗.下划线.删除线 图片 智能链接 表格 转义序列 用markdown写博客 前言 博客园支持用mark ...

  5. 博客配置Racket代码字体

    我想在博客园的文章中插入Racket代码,但是博客园的代码块和高亮都太难看了,如果能把scribble/manual的CSS文件中的Racket代码块的配置拿出来就可以有漂亮的Racket代码高亮了, ...

  6. 用markdown写博客,看这一篇就够了

    0. 前言 记得上次用markdown写博客,尽管我有markdown使用经验,但第一篇markdown博客还是不得已的"回滚"了. 传送门:记录一下第一次用markdown写博客 ...

  7. javascript博客爱心特效代码与代码解析

    这个鼠标点击出现爱心的特效经常在别的博客里见到,于是我查了度娘后拿来直接用上了. 虽然不知道原作者是谁,但肯定是个大神,只有通过观摩他/她的代码膜拜一下啦. 直接上代码(解析在代码注释里): // 自 ...

  8. hexo博客如何插入图片

    Hexo是一个静态的博客网站生成器,生成一个博客只需要分分钟的时间就能搞定. Hexo的博文是支持Markdown格式的,发表一篇文章只需要简简单单的几个命令. hexo new '文章'就会生成一个 ...

  9. 让Emeditor支持markdown编辑博客

    让Emeditor支持markdown编辑博客 1. 关于高亮显示 2.生成HTML文件并预览 用惯了Emeditor,最近又开始学习用markdown写博客,怎么让Emeditor支持markdow ...

随机推荐

  1. Making the Elephant Dance: Strategic Enterprise Analysis

    http://www.modernanalyst.com/Resources/Articles/tabid/115/ID/2934/categoryId/23/Making-the-Elephant- ...

  2. 让Tomcat支持中文路径名和中文文件名

    http://hdwangyi.iteye.com/blog/107709 Tomcat是Java开发者使用得较多的一个Web服务器,因为它占用资源小,运行速度快等特点,深受Java Web程序员的喜 ...

  3. Btrace是一个实时监控工具

    http://blog.csdn.net/gzh0222/article/details/9731031 Btrace是一个实时监控工具,可以无需修改应用代码(事实上它修改了字节码),来达到不可告人的 ...

  4. PureMVC(JS版)源码解析(八):Proxy类

    前面,我们讲了与视图相关联的Mediator类,接下来我们讲讲与数据相关联的Proxy类. 关于Proxy类的作用,在Proxy类源码中,有这么一段注释:  * In PureMVC, Proxy c ...

  5. java Thread.join()

    thread1.join()方法阻塞调用此方法的线程,直到线程thread1完成,此线程再继续. 通常用于在main()主线程内,等待其它线程完成再结束main()主线程 @Test /** * ou ...

  6. SQL多行拼接为一行

    使用简单T-SQL,拼接一列多行为一行.按SQL SERVER的说法叫做自拼接(PS:区分自连接) 还有一种方法是for xml path的方式,感觉不实用. declare @Result varc ...

  7. ANDROID 通过监听来电去电,并弹出悬浮窗

    要监听android打电话和接电话,有一种的是通过新建一个Receiver继承自BroadcastReceiver. 还有一种也可通过PhoneStateListener来实现.今天就说说后面一种,废 ...

  8. HTML+CSS基础学习笔记(8)

    一.水平居中设置--行内元素 如果设置元素为文本.图片等行内元素时,水平居中是通过给父元素设置text-align:center来实现的 二.水平居中设置 --定宽块状元素 #当被设置元素为块状元素时 ...

  9. angularJs ionic phoneGap 分享

    由于坑较多 就如“天下难事,必作于易吧” 最近有机会接触到了git  node angularJs ionic phoneGap 很开森也很痛苦 分享如下 推荐的几个博客地址: ionic开发插件之n ...

  10. Hadoop 系列 - (1) - 学习随笔 - 起源、构成

    起源:Hadoop是google 的集群系统的开源实现            --Google集群系统,:GFS(Google file system),MapReduce,BigTable(严格意义 ...