markdown插入图片、音频视频
1、markdown 简介
Markdown 是一种轻量级标记语言,它允许人们使用易读易写的纯文本格式编写文档。
Markdown 编写的文档后缀为 .md, .markdown
简单易学容易上手,十分钟左右即可上手
有助于作者专心写作(各种在线博客编辑坑太多,文档丢失、广告太多,可移植性差)
2、插入图片
我们在写博客的时候总免不了要插入各种图片,下面就是markdown插入图片的语法

插入图片列子:

我们经常需要将一篇费劲心思写好的文章发布到各大平台<微信公众号、头条、掘金、今日头条。。。以上插入图片语法虽然简单,但是图片存放就成了一个问题。 图片存在本地的话,上传到各个网站就没法显示了,就算一个一个复制粘贴上去,移植到其他平台,如果平台没有自动保存图片功能,图片就会消失。这时候我们就需要一个图床。
什么是图床呢?
- 图床就是一个便于在博客中插入在线图片的个人图片仓库。设置图床之后,我们可以随时将我们用到的图片上传到仓库,方便在博文中使用,预览。并且只要不亲自删除,就可以随时随地预览
下面介绍一个 PicGo + Gitee(码云)实现markdown图床 免费
PicGo + Gitee(码云)实现免费markdown图床
3、插入音频
3.1 使用audio 标签
语法
<audio id="audio" controls="" preload="none">
<source id="mp3" src="音频地址">
</audio>
3.2 使用iframe标签
下面我们以获取网易云音乐为例
- 首先在网易云音乐播放界面,点击生成外链播放器

- 选择自己想要的大小的iframe代码块

复制iframe代码块
<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=86 src="//music.163.com/outchain/player?type=2&id=1488737309&auto=1&height=66"></iframe>
加好之后效果如下
4、引入视频
我们小破站为例
1.找到我们想插入的视频,然后点击下面的分享

加入一个自适应iframe
<iframe src="//player.bilibili.com/player.html?aid=59317437&bvid=BV1Pt411G7qh&cid=103365806&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>
加好之后如下
g="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true">
加好之后如下
<iframe src="//player.bilibili.com/player.html?aid=59317437&bvid=BV1Pt411G7qh&cid=103365806&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>
markdown插入图片、音频视频的更多相关文章
- MarkDown插入图片
MarkDown插入图片的语法 ·编辑器:MacDown 比如博客园的Logo,URL是 http://static.cnblogs.com/images/logo_small.gif 在要插入图片的 ...
- 【转】android如何浏览并选择图片 音频 视频
转自:http://www.cnblogs.com/top5/archive/2012/03/06/2381986.html 这几天 在学习并开发android系统的图片浏览 音频 视频 的浏览 ...
- 关于Markdown插入图片路径错误的问题
关于Markdown插入图片路径错误的问题 开发问题 解决方法 妈耶,连续一天写2篇博客,也是醉了,这篇博客主要是介绍关于Markdown插入图片路径错误的问题 在上篇中,我介绍了一下Markdow ...
- 【Tips】有道云笔记中Markdown插入图片
在有道云笔记中用MarkDown插入图片 新建一个文档专门用来放图片 把所有要用的图片专门放在一个笔记里,用普通模式先同步笔记,然后用分享笔记 会有一个链接,用浏览器打开这个分享的笔记就能找到所有的图 ...
- 优雅地在markdown插入图片
markdown 中插入图片,好烦!!! 喜欢用Markdown写文字,但是它的图片引用是一个大问题(当然csdn不会遇到这个问题).借用第三方将图片储存在印象笔记上是一个好办法.但是会出现的一个 ...
- 在Vue项目使用quill-editor带样式编辑器(更改插入图片和视频)
vue-quill-editor默认插入图片是直接将图片转为base64再放入内容中,如果图片比较大的话,富文本的内容就会很大. 插入视频是直接弹框输入URL地址,某些需求下我们需要让用户去本地选择自 ...
- Markdown 插入图片技巧
在使用Markdown编写博客或文件的时候,经常会需要插入图片.如果使用Markdown语法,我们会发现调整图片的大小会是个问题. 所以推荐使用另一种办法插入图片,使用HTML语法,示例如下: < ...
- markdown 插入图片太大?怎么设定图片大小?
你一定在插入图片的时候,遇到图片太大,影响观感的问题. Markdown中,图片大小的设定方式有两种 第一种: 
1计算机表示图形的几种方式 bmp:以高质量保存 用于计算机 jpg:以良好的质量保存 用于计算机或者网络 png:以高质量保存 图片大小的计算公式:图片 ...
随机推荐
- pytest之运行环境
简介 pytest是Python最流程化的单元测试框架,它具有允许直接使用assert进行断言,而不需要使用self.assert*:可以自动寻找单测文件.类和函数,还可支持执行部分用例:Modula ...
- Spring 常见问题 - 1
1. 什么是spring? 两大功能,依赖注入和面向切面编程(DI & AOP) 为了降低 Java 开发的复杂性,Spring 采取了以下4种关键策略 基于 POJO 的轻量级和最小侵入性编 ...
- Ubuntu NVIDIA显卡驱动+CUDA安装(多版本共存)
NVIDIA显卡驱动 1.禁止集成的nouveau驱动 solution 1 (recommand) # 直接移除这个驱动(备份出来) mv /lib/modules/3.0.0-12-generic ...
- WIn环境基于vs编辑器,Qt应用申请管理员权限的解决方法(转载)
原文章地址:https://blog.csdn.net/weixin_38416696/article/details/103879377 基本按照那个文章的操作.基本可以了. 唯一问题就是那个vs的 ...
- Postgresql 或GreenPlum 查询结果部分字段转json格式并保留字段名(row_to_json)
-- 一些搜索结果给出 部分字段转json保留原字段的方式是用子查询select row_to_json(t) from ( select id, text from words ) t 但是如果子查 ...
- Java 比较两个对象的不同之处(old, new) 包含 bean 对象下的 list, Map , bean 的细节
Java 比较两个对象的不同之处(old, new) 包含 bean 对象下的 list, Map , bean 的细节 package com.icil.pinpal.test1; impor ...
- MySQL学习(十一)B树与B+树了解
参考博客:https://www.cnblogs.com/kismetv/p/11582214.html
- Flutter 2 渲染原理和如何实现视频渲染
7 月 17 日下午,在前端专场巡回沙龙北京站中,声网Agora跨平台开发工程师卢旭辉带来了<Flutter2 渲染原理和如何实现视频渲染>的主题分享,本文是对演讲内容的整理. 本次分享主 ...
- CSS必知必会
CSS概念 css的使用是让网页具有统一美观的页面,css层叠样式表,简称样式表,文件后缀名.css css的规则由两部分构成:选择器以及一条或者多条声明 选择器:通常是需要改变的HTML元素 声明: ...
- 使用EFCore的Code First和MySql数据库迁移
1. 感慨一下 随着.net core的持续更新和升级,至少对于从事.net开发的人员和即将踏入这个领域的人来说,我相信大家的热情还是持续高涨的.国内的.net开发生态相比于之前来说,还是大有所好转的 ...