大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。
Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺
Markdown是一种轻量级标记语言,排版语法简洁,让人们更多地关注内容本身而非排版。它使用易读易写的纯文本格式编写文档,可与HTML混编,可导出 HTML、PDF 以及本身的 .md 格式的文件。因简洁、高效、易读、易写,Markdown被大量使用,如Github、Wikipedia、简书等。
Markdown编辑器提供了简单的插入图片的方法,但根据不同的编辑器,默认的方式可能不同,有些是默认左对齐,有些则是默认居中对齐,而且没有缩放功能,但也能满足大多数的写作需求。如果想要使用更丰富的关于插入图片的操作,可以采用内嵌HTML的方式来编写 Markdown 文件。下面先看一下csdn的markdown编辑器插入图片的方式,然后介绍一下使用 HTML 的方式来插入图片的方法。
一、csdn的MD编辑器插入图片的方式:
不同的markdown编辑器可能有不同的显示效果,下面介绍的是CSDN的MD编辑器。
它插入图片语法:![图片描述](图片链接)
1.1 图片对齐方式
csdn的MD编辑器直接点图片按钮插入图片的方式就是居中对齐的,按图片的实际尺寸显示,这是默认的图片插入方式。它会在图片链接后面加上#pic_center
的字样,由此可以推断:左对齐对应#pic_left
,右对齐对应#pic_right
,下面直接看例子。
1.1.1 markdown格式文本
- 下图是居中显示-图片默认插入方式
![图片描述](https://img-blog.csdnimg.cn/98ceaf6910c441d6b18ac3565cbb82b8.png#pic_center)
- 下图是左对齐显示
![图片描述](https://img-blog.csdnimg.cn/98ceaf6910c441d6b18ac3565cbb82b8.png#pic_left)
- 下图是右对齐显示
![图片描述](https://img-blog.csdnimg.cn/98ceaf6910c441d6b18ac3565cbb82b8.png#pic_right)
1.1.2 显示效果
- 下图是居中显示-图片默认插入方式
- 下图是左对齐显示
- 下图是右对齐显示
1.2 指定图片尺寸
csdn的MD编辑器提供了带尺寸的图片的插入方式,就是在图片链接的最后加上空格、等号宽x高
,例如添加30×30尺寸就是=30x30
,注意等号前面有个空格。下面用markdown文本举个例子。上面那个图片原图是360×360的,下面把它按照180×180地尺寸添加进来看看效果。至于左对齐、右对齐的尺寸,自己结合着使用就行了。
1.2.1 markdown格式文本
![图片描述](https://img-blog.csdnimg.cn/98ceaf6910c441d6b18ac3565cbb82b8.png#pic_center =180x180)
1.2.2 显示效果
二、内嵌HTML语法实现插入图片
HTML插入图片的基础语法: <img src="图片链接" alt="图片alt" title="图片title">
使用HTML语法插入图片,默认是左对齐的,可以用<div>
标签来改变其对齐方式,<div>
标签定义一个区域,使用align
属性可以改变定义的区域的对齐方式。其他属性参阅下面的例子,2.1 markdown格式文本可以直接拷贝到markdown编辑器去看效果。
在 HTML 中,
<img>
标签用来定义图片,是空标签,意思是说,它只包含属性,并且没有闭合标签。
src
指 “source”。源属性的值是图像的 URL 地址
alt
属性用来为图像定义一串可替换的文本。无法载入图像时,替换文本告诉读者,他们失去的信息。
title
属性描述了元素的额外信息 (作为工具条使用)
height
(高度) 与width
(宽度) 属性用于设置图像的高度与宽度。
style
属性规定元素的行内样式(inline style),定义图片时可以用来缩放
<div>
标签用来定义文档中的一个分隔区块或者一个区域部分
align
属性用来对齐,它的值有left、right、center、justify
2.1 markdown格式文本
2.1 显示效果
<img>
标签添加图片
alt
属性 – 这里图片链接错误,图片无法载入,所以显示了alt
属性的文本
height、width
属性 – 指定宽高为150
<div>
标签的align
属性 – 使图片和文本居中,左对齐left
,右对齐right
摩托车图片
上面例子中还有个别属性没有使用,原因是csdn的MD编辑器不支持,没有效果,所以不展示了,总结起来就是图片的对齐方式和指定尺寸显示。我是前两天想使图片左对齐而去查找的资料,在此记录一下。下篇文章将介绍 markdown 编辑器自定义表格。
相关文章:
Markdown编辑器(一) – 实现页内跳转
Markdown编辑器(二) – 文本样式(更改字体、字体大小、字体颜色、加粗、斜体、高亮、删除线)
发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/190443.html原文链接:https://javaforall.cn
【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛
【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...