CSDN-markdown语法之怎样插入图片
文件夹
正文
在CSDN Markdown编辑器中插入图片有两种方式:
使用工具栏上的图片上传功能
自己动手写图片链接的方式
以下分别介绍它们的用法。
图片上传方式
这样的方式最简单,属图形化方式。大家能够非常easy的在CSDN Markdown编辑器的工具栏那里找到图片上传的图标:
或者直接使用快捷键Ctrl + G
,会弹出一个图片上传的对话框,能够看出既能够插入网上的在线图片也能够上传本地图片插入。
插入在线图片
上面已经给出图片的书写格式:
在线图片地址 + 若干个空格 + 可选的用双引號括起来的图片提示
插入本地图片
对话框中切换到“上传图片”的标签后例如以下:
使用方式更简单:
选择本地图片 — 上传 — 以下方框里显示图片预览 — 最后确认插入
图片链接方式
假设插入的是在线图片,即仅仅有图片URL,那么除了上面用图形化方式操作之外。还能够使用图片链接的方式。
Markdown使用一种和「普通文本链接」非常类似的语法来标记图片,相同也同意两种样式: 行内式和參考式。
行内式图片链接
行内式的图片链接语法例如以下:


具体叙述各个组成部分:
- 一个惊叹号
!
- 接着一个方括号。里面放上图片的替代文字。也就是当图片还未载入成功时显示的替换文本
- 接着一个普通括号,里面放上图片的网址,以及可选的用双引號(或单引號或括弧)包住的’title’文字,两者之间用若干个空格切割开来。假设加上了’title’文字,那么鼠标移到该图片上就会显示出该文字
一个实例:
以下我在网上找了个在线图片,复制它的URL按上面的语法格式写就可以成功插入图片。

效果为:
參考式图片链接
參考式的图片链接语法则如以下这样:
![Alt text][id]
[id]: url/to/image "Optional title"
当中「id」是图片參考的标签,图片參考的定义方式和链接參考一样,能够放在文档的不论什么位置。
具体叙述各个组成部分:
- 一个惊叹号
!
- 接着一个方括号。里面放上图片的替代文字,也就是当图片还未载入成功时显示的替换文本
- 接着还有一个方括号。里面是图片參考的标签id,id能够是数字、英文字符。也能够是中文
- 最后在文档的不论什么位置处写上标签id的内容定义,内容定义的形式为:
- 一个方括号(前面能够选择性地加上至多三个空格来缩进),里面输入所要定义的标签id
- 接着一个冒号
- 接着一个以上的空格或制表符
- 接着图片的网址
- 最后选择性地接着title内容,能够用单引號、双引號或是括弧包着,与上面一样
样例:
还是以上面那个图片URL为例,改写成參考式链接例如以下:
![CSDN图标][csdn]
[csdn]: http://imgtech.gmw.cn/attachement/jpg/site2/20111223/f04da22d7ba7105e1d7507.jpg "这是CSDN的图标"
效果:
几个问题探讨
以下针对Markdown插入图片的方式提出几个大家可能会问的问题,并依据自己的经验进行探讨解答。
问题1:图片上传和图片链接两种方式的差别
无论是利用图片上传的方式还是图片链接的方式插入图片,终于形成的都是Markdown内部的图片链接语法,因此两种方式在本质上是一样的。
比方我上传一张本地图片,成功插入后Markdown相应内容例如以下:

能够看出在我们上传本地图片成功后,CSDN-markdown编辑器会将server上该图片的地址取出来,然后用Markdown图片链接的语法插入图片。因此我们在上传图片后,还能够在相应的Markdown内容上进行改动。加上图片描写叙述和图片的title。
问题2:Markdown中怎样指定图片的高和宽?
到眼下为止, Markdown还没有办法指定图片的宽高,假设须要的话,你能够使用普通的 <img>
标签,利用它的width
和height
属性来定制宽高。
还是以上面那个图片URL为例,假设我们希望把它的大小改为300*120,则能够这么做:
<img src="http://imgtech.gmw.cn/attachement/jpg/site2/20111223/f04da22d7ba7105e1d7507.jpg" width = "300" height = "120" alt="CSDN图标" />
效果:
问题3:Markdown中怎样指定图片的对齐方式?
大家可能也注意到了。CSDN-markdown编辑器显示的图片默认都是左对齐,那能不能将其改为居中对齐或右对齐呢?
答案是Markdown做不到,但跟「2」一样,我们能够借助html语法来实现,html中让一个元素居中的方式也有非常多。以下给出两种方式供參考。
方法一(推荐):
假设仅仅是居中对齐,则能够使用html中的<center>...</center>
标签,包围在Markdown图片链接内容的外面就可以,例如以下:
<center>

</center>
效果:
当然,上面也说了。该方法仅仅能用于居中对齐,不能进行右对齐。
方法二:
使用html中的div
标签,它有个对齐属性align
,能够指定为left
、center
和right
以实现左对齐、居中对齐和右对齐。只是经我实验,这样的方式div
标签之间不能放Markdown图片链接语法,而仅仅能是html的语法格式。因此还要配合<img>
标签使用。
以下是居中对齐的写法演示样例:
<div align="center">
<img src="http://imgtech.gmw.cn/attachement/jpg/site2/20111223/f04da22d7ba7105e1d7507.jpg" alt="CSDN图标" />
</div>
效果:

注意: 这里假设大家细致看的话能够发现上面闭合标签</div>
缩进了一个空格,由于经我尝试,这里假设不缩进一个空格就达不到想要的效果,会造成某些Markdown语法失效。
CSDN-markdown语法之怎样插入图片的更多相关文章
- CSDN markdown 编辑器 第四篇 LaTex语法
Latex是为了写数学公式的. 嗯-但实际这样的语言的作用是为了排版的.数学公式仅仅是他的附加属性. 可是markdown引入这个全然是为了写公式.其它的Latex语法不支持. CSDN markdo ...
- MarkDown插入图片
MarkDown插入图片的语法 ·编辑器:MacDown 比如博客园的Logo,URL是 http://static.cnblogs.com/images/logo_small.gif 在要插入图片的 ...
- 优雅地在markdown插入图片
markdown 中插入图片,好烦!!! 喜欢用Markdown写文字,但是它的图片引用是一个大问题(当然csdn不会遇到这个问题).借用第三方将图片储存在印象笔记上是一个好办法.但是会出现的一个 ...
- 使用markdown语法撰写csdn博客
在CSDN之下写blog无疑是一件非常吃力的事情,对于非常多simple爱好者来讲,能用markdown语法来书写代码是最优雅简洁只是的了.本文主要介绍markdown语法和怎样它来撰写csdn下的b ...
- [csdn markdown]使用摘记一源代码高亮及图片上传和链接
本文主要内容是体验csdn markdown的代码块高亮显示和图片链接及上传. 图片上传 上边这是标题行,只需要使用一个#就可以表示,几个表示是几级标题 图片上传 本地图片上传控件 本地图片上传方式 ...
- Markdown 插入图片技巧
在使用Markdown编写博客或文件的时候,经常会需要插入图片.如果使用Markdown语法,我们会发现调整图片的大小会是个问题. 所以推荐使用另一种办法插入图片,使用HTML语法,示例如下: < ...
- 关于Markdown插入图片路径错误的问题
关于Markdown插入图片路径错误的问题 开发问题 解决方法 妈耶,连续一天写2篇博客,也是醉了,这篇博客主要是介绍关于Markdown插入图片路径错误的问题 在上篇中,我介绍了一下Markdow ...
- [csdn markdown]使用摘记一源码高亮及图片上传和链接
本文主要内容是体验csdn markdown的代码块高亮显示和图片链接及上传. 图片上传 上边这是标题行.仅仅须要使用一个#就能够表示.几个表示是几级标题 图片上传 本地图片上传控件 本地图片上传方式 ...
- 有道云笔记MarkDown 插入图片
前言: 在网上找了很多有道云笔记的markdown笔记如何插入本地图片,试了好几种方式都是一时可以显示而已,只要电脑重启或者换终端查看就无法显示图片了.网上常用的方法无非两种有效:github.博客. ...
随机推荐
- 最新linux运维高级架构课13期 架构师课程
有会员购买的,分享给大家.完整一套,可以学习一下. ├─L001-2017linux运维高级架构师13期-运维与自动化运维发展-10节 │ 1-1运维职业发展.avi │ ...
- laravel中soapServer支持wsdl的例子
最近在对接客户的CRM系统,获取令牌时,要用DES方式加密解密,由于之前没有搞错这种加密方式,经过请教了"百度"和"谷歌"两个老师后,结合了多篇文档内容后,终于 ...
- CF546E Soldier and Traveling(网络流,最大流)
CF546E Soldier and Traveling 题目描述 In the country there are \(n\) cities and \(m\) bidirectional road ...
- Fans同学已死,终年24岁
亲爱的同学们,朋友们,QQ好友. 告诉大家一个悲剧:Fans同学已死,终年24岁. 马甲变迁 正式告诉大家一个消息,我的ID"Fans同学"正在退出"历史舞台" ...
- 钩子(hooks)—webhook-使用钩子自动触发部署
钩子(hooks)-webhook http://fighter.blog.51cto.com/1318618/1670667 https://www.lovelucy.info/auto-deplo ...
- postgresql拓展if、ifnull、group_concat函数
postgresql版本是8.2.15. 最近陆续有数据分析师从impala.hive转到查询gpdb,gpdb虽然能够支持在查询语句中带多个distinct,但是缺少相应的if.ifnull.gro ...
- ant安装配置问题:ANT_HOME is set incorrectly or ant could not be located. Please set ANT_HOME.
项目用到ant 1.去官网下载:http://ant.apache.org/bindownload.cgi 2.解压至安装C盘 3.设置ANT_HOME.PATh.CLASSPATH ANT_HOME ...
- FragmentActivity+FragmentTabHost+Fragement替代TabActibvity+TabHost+Activity
自Android3.2之后,TabActibvity被弃用(Deprecated).取而代之的是FragmentActivity.由于Fragment比Activiy更灵活.消耗的资源更小.全然可以满 ...
- DNS A记录和CNAME记录
参考文章:http://blog.xieyc.com/differences-between-a-record-and-cname-record/ A (Address) 记录是用来指定主机名(或域名 ...
- 创建带有IN类型参数的存储过程(四十八)
创建带有IN类型参数的存储过程 我们经常要从数据表中删除记录,一般情况我们删除记录都是根据id来删除的,比如我们通常要输入DELETE FROM 表名 WHERE 后面跟上我们的条件,因为我们要经常写 ...