Markdown (CSDN) MD编辑器(三)- 图片缩放、指定尺寸、居中、左对齐、右对齐

简介: Markdown (CSDN) MD编辑器(三)- 图片缩放、指定尺寸、居中、左对齐、右对齐

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://ucc.alicdn.com/images/user-upload-01/98ceaf6910c441d6b18ac3565cbb82b8.png#pic_center)
- 下图是左对齐显示
![图片描述](https://ucc.alicdn.com/images/user-upload-01/98ceaf6910c441d6b18ac3565cbb82b8.png#pic_left)
- 下图是右对齐显示
![图片描述](https://ucc.alicdn.com/images/user-upload-01/98ceaf6910c441d6b18ac3565cbb82b8.png#pic_right)

1.1.2 显示效果

下图是居中显示-图片默认插入方式

2018122814580746.png

下图是左对齐显示

2018122814580746.png

下图是右对齐显示

2018122814580746.png

1.2 指定图片尺寸

csdn的MD编辑器提供了带尺寸的图片的插入方式,就是在图片链接的最后加上空格、等号宽x高,例如添加30x30尺寸就是=30x30,注意等号前面有个空格。下面用markdown文本举个例子。上面那个图片原图是360x360的,下面把它按照180x180地尺寸添加进来看看效果。至于左对齐、右对齐的尺寸,自己结合着使用就行了。

1.2.1 markdown格式文本

![图片描述](https://ucc.alicdn.com/images/user-upload-01/98ceaf6910c441d6b18ac3565cbb82b8.png#pic_center =180x180)

1.2.2 显示效果

2018122814580746.png


二、内嵌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格式文本

- `<img>`标签添加图片
<img src="https://ucc.alicdn.com/images/user-upload-01/98ceaf6910c441d6b18ac3565cbb82b8.png" alt="这是一张摩托车图片">
- `alt`属性 - 这里图片链接错误,图片无法载入,所以显示了`alt`属性的文本
<img src="https://ucc.alicdn.com/images/user-upload-01/" alt="这是一张摩托车图片">
- `height、width`属性 - 指定宽高为150
<img src="https://ucc.alicdn.com/images/user-upload-01/98ceaf6910c441d6b18ac3565cbb82b8.png" width=150 height=150>
- `<div>` 标签的`align`属性 - 使图片和文本居中,左对齐`left`,右对齐`right`
<div align=center>
<img src="https://ucc.alicdn.com/images/user-upload-01/98ceaf6910c441d6b18ac3565cbb82b8.png">
<br>摩托车图片</div>

2.2 显示效果

  • <img>标签添加图片
  • image.png

alt属性 - 这里图片链接错误,图片无法载入,所以显示了alt属性的文本

height、width属性 - 指定宽高为150

  • image.png

<div> 标签的align属性 - 使图片和文本居中,左对齐left,右对齐right

image.png

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

参考资料:

HTML 参考手册

Markdown语法

Markdown样式自定义及详解

相关文章:

Markdown编辑器(一) - 实现页内跳转

Markdown编辑器(二) - 文本样式(更改字体、字体大小、字体颜色、加粗、斜体、高亮、删除线)

目录
相关文章
|
2月前
|
Ubuntu Linux 测试技术
Linux系统之部署轻量级Markdown文本编辑器
【10月更文挑战第6天】Linux系统之部署轻量级Markdown文本编辑器
128 1
Linux系统之部署轻量级Markdown文本编辑器
|
23天前
|
人工智能 移动开发 前端开发
Markdown-to-Image:开源的在线 Markdown 转海报编辑器
Markdown-to-Image 是一款开源的在线 Markdown 转海报编辑器,能够将 Markdown 文本内容转换为图像,适用于创建社交媒体帖子、海报和其他视觉内容。该工具支持多种输出格式,并允许用户自定义样式,适用于多种应用场景。
66 4
Markdown-to-Image:开源的在线 Markdown 转海报编辑器
|
2月前
|
存储 前端开发 JavaScript
🚀前端轻松实现网页内容转换:一键复制、保存图片及生成 Markdown
在现代前端开发中,提升用户的交互体验至关重要。本文将详细介绍如何使用 HTML2Canvas 和 Turndown 两个强大的 JavaScript 库,实现将网页选中文本转化为图片并保存或复制到剪贴板,或将内容转换为 Markdown 格式。文章包含核心代码实现、技术细节和功能拓展方向,为开发者提供了一个轻量级的解决方案,提升用户体验。
176 68
|
4月前
|
存储 安全 数据安全/隐私保护
Django 后端架构开发:富文本编辑器权限管理与 UEditor 、Wiki接入,实现 Markdown 文本编辑器
Django 后端架构开发:富文本编辑器权限管理与 UEditor 、Wiki接入,实现 Markdown 文本编辑器
177 0
|
5月前
|
移动开发 前端开发 JavaScript
基于 HTML5 和 Canvas 开发的在线图片编辑器
基于 HTML5 和 Canvas 开发的在线图片编辑器
112 0
|
1月前
|
程序员
【Markdown速成】半小时入门Markdown教程(后缀.md文件详解)
作为程序员我们经常会看到README.md这种说明文件,以.md为后缀的文件就是我们所说的Markdown的文件。
164 4
|
2月前
|
开发工具
用 Vim 编辑 Markdown 时直接粘贴图片
介绍一款 Vim 插件,可以帮助提升编辑 Markdown 时的从剪贴板粘贴图片的效率和体验。
33 2
|
3月前
|
JavaScript 前端开发 API
vue3 v-md-editor markdown编辑器(VMdEditor)和预览组件(VMdPreview )的使用
本文介绍了如何在Vue 3项目中使用v-md-editor组件库来创建markdown编辑器和预览组件。文章提供了安装步骤、如何在main.js中进行全局配置、以及如何在页面中使用VMdEditor和VMdPreview组件的示例代码。此外,还提供了一个完整示例的链接,包括编辑器和预览组件的使用效果和代码。
vue3 v-md-editor markdown编辑器(VMdEditor)和预览组件(VMdPreview )的使用
|
4月前
|
前端开发 Python
60行Python代码开发在线markdown编辑器
60行Python代码开发在线markdown编辑器
|
4月前
|
JavaScript
在Vue项目中vue-quill-editor的安装与使用【详细图解+过程+包含图片的缩放拖拽】
文章详细介绍了在Vue项目中安装和使用`vue-quill-editor`的步骤,包括如何通过npm安装、局部挂载、在Vue页面中引入和配置使用。同时,还提供了如何实现图片的缩放和拖拽功能的进阶教程,涉及到安装额外的插件`quill-image-drop-module`和`quill-image-resize-module`,以及对Webpack配置的调整。最后,文章还提供了实际效果展示和一些后续可能的拓展功能,如上传视频和将图片上传到服务器等。
在Vue项目中vue-quill-editor的安装与使用【详细图解+过程+包含图片的缩放拖拽】