Markdown (CSDN) MD编辑器(三)

您所在的位置:网站首页 如何缩小照片 Markdown (CSDN) MD编辑器(三)

Markdown (CSDN) MD编辑器(三)

2024-07-16 05:12:30| 来源: 网络整理| 查看: 265

目录 一、csdn的MD编辑器插入图片的方式:  1.1 图片对齐方式  1.2 指定图片尺寸 二、内嵌HTML语法实现插入图片 三、实例讲解

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高,例如添加30x30尺寸就是=30x30,注意等号前面有个空格。下面用markdown文本举个例子。上面那个图片原图是360x360的,下面把它按照180x180地尺寸添加进来看看效果。至于左对齐、右对齐的尺寸,自己结合着使用就行了。

  1.2.1 markdown格式文本 ![图片描述](https://img-blog.csdnimg.cn/98ceaf6910c441d6b18ac3565cbb82b8.png#pic_center =180x180)   1.2.2 显示效果

图片描述

二、内嵌HTML语法实现插入图片

HTML插入图片的基础语法: 图片alt 使用HTML语法插入图片,默认是左对齐的,可以用标签来改变其对齐方式,标签定义一个区域,使用align属性可以改变定义的区域的对齐方式。其他属性参阅下面的例子,2.1 markdown格式文本可以直接拷贝到markdown编辑器去看效果。

在 HTML 中, 标签用来定义图片,是空标签,意思是说,它只包含属性,并且没有闭合标签。 src指 “source”。源属性的值是图像的 URL 地址 alt属性用来为图像定义一串可替换的文本。无法载入图像时,替换文本告诉读者,他们失去的信息。 title属性描述了元素的额外信息 (作为工具条使用) height(高度) 与 width(宽度) 属性用于设置图像的高度与宽度。 style属性规定元素的行内样式(inline style),定义图片时可以用来缩放 标签用来定义文档中的一个分隔区块或者一个区域部分 align属性用来对齐,它的值有left、right、center、justify

2.1 markdown格式文本 - ``标签添加图片 这是一张摩托车图片 - `alt`属性 - 这里图片链接错误,图片无法载入,所以显示了`alt`属性的文本 这是一张摩托车图片 - `height、width`属性 - 指定宽高为150 - `` 标签的`align`属性 - 使图片和文本居中,左对齐`left`,右对齐`right` 摩托车图片 2.2 显示效果 标签添加图片 这是一张摩托车图片alt属性 - 这里图片链接错误,图片无法载入,所以显示了alt属性的文本 这是一张摩托车图片height、width属性 - 指定宽高为150 标签的align属性 - 使图片和文本居中,左对齐left,右对齐right 摩托车图片

上面例子中还有个别属性没有使用,原因是csdn的MD编辑器不支持,没有效果,所以不展示了,总结起来就是图片的对齐方式和指定尺寸显示。我是前两天想使图片左对齐而去查找的资料,在此记录一下。下篇文章将介绍 markdown 编辑器自定义表格。

参考资料: HTML 参考手册 Markdown语法 Markdown样式自定义及详解

相关系列文章: Markdown编辑器(一) - 实现页内跳转 Markdown编辑器(二) - 文本样式(更改字体、字体大小、字体颜色、加粗、斜体、高亮、删除线) Markdown编辑器(三) - 图片缩放、指定尺寸、居中、左对齐、右对齐 Markdown编辑器(四) - 漂亮表格(表格背景色、跨行、跨列、多行)



【本文地址】

公司简介

联系我们

今日新闻


点击排行

实验室常用的仪器、试剂和
说到实验室常用到的东西,主要就分为仪器、试剂和耗
不用再找了,全球10大实验
01、赛默飞世尔科技(热电)Thermo Fisher Scientif
三代水柜的量产巅峰T-72坦
作者:寞寒最近,西边闹腾挺大,本来小寞以为忙完这
通风柜跟实验室通风系统有
说到通风柜跟实验室通风,不少人都纠结二者到底是不
集消毒杀菌、烘干收纳为一
厨房是家里细菌较多的地方,潮湿的环境、没有完全密
实验室设备之全钢实验台如
全钢实验台是实验室家具中较为重要的家具之一,很多

推荐新闻


图片新闻

实验室药品柜的特性有哪些
实验室药品柜是实验室家具的重要组成部分之一,主要
小学科学实验中有哪些教学
计算机 计算器 一般 打孔器 打气筒 仪器车 显微镜
实验室各种仪器原理动图讲
1.紫外分光光谱UV分析原理:吸收紫外光能量,引起分
高中化学常见仪器及实验装
1、可加热仪器:2、计量仪器:(1)仪器A的名称:量
微生物操作主要设备和器具
今天盘点一下微生物操作主要设备和器具,别嫌我啰嗦
浅谈通风柜使用基本常识
 众所周知,通风柜功能中最主要的就是排气功能。在

专题文章

    CopyRight 2018-2019 实验室设备网 版权所有 win10的实时保护怎么永久关闭