如何在简书中插入代码的样式之《编辑器Markdown的应用》

简介: 今天再看文章的时候,发现技术性的文章里面经常出来代码编辑器的样式(如下图),就比较好奇是如何实现的?搜索后发现原来是切换到Markdown模式下就可以了。

今天再看文章的时候,发现技术性的文章里面经常出来代码编辑器的样式(如下图),就比较好奇是如何实现的?搜索后发现原来是切换到Markdown模式下就可以了。


操作步骤如下


方法一:点击头像下拉找到设置页面——基础设置——常用编辑器:Markdown


image.png


方法二:点击写文章,左下角找到设置——默认编辑器——Markdown编辑器


image.png


什么是Markdown


文本编辑器通常用到的是文本编辑器和Markdown编辑器两个。文本编辑器类似word的编辑方式,这里就不讲了。


Markdown是一种轻量级的「标记语言」,它的优点很多,目前也被越来越多的写作爱好者、撰稿者广泛使用。


Markdown的语法也十分简单,常用的标记符号也不超过十个,熟悉这种语法规则后,几分钟就可以上手,学习成本较低,可以说实现很多效果,相对于HTML标记语言非常容易。


Markdown是一种用来写作的轻量级「标记语言」,它用简洁的语法代替排版,让那个内容、格式或者插图,只需要键盘就可以全部搞定,从而使我们可以更加专注于码子。


使用 Markdown 的优点


  • 专注你的文字内容而不是排版样式,安心写作。


  • 轻松的导出 HTML、PDF 和本身的 .md 文件。


  • 纯文本内容,兼容所有的文本编辑器与字处理软件。


  • 随时修改你的文章版本,不必像字处理软件生成若干文件版本导致混乱。


  • 可读、直观、学习成本低。


支持 Markdown 语法的编辑器有很多,包括很多网站(例如 :简书)也支持了Markdown 的文字录入。Markdown 从写作到完成,导出格式随心所欲,你可以导出 HTML 格式的文件用来网站发布,也可以十分方便的导出 PDF 格式,这种格式写出的简历更能得到 HR 的好感,甚至可以利用 CloudApp 这种云服务工具直接上传至网页用来分享你的文章,全球最大的轻博客平台 Tumblr,也支持使用 Mou 这类 Markdown 工具进行编辑并直接上传。


image.png


Markdown 语法的简要规则


标题


image.png


h1 一级标题


h2二级标题


h3三级标题


h4四级标题


以此类推,共六级标题,建议在#后加一个空格,这是最标准的Markdown语法。


插入图片


插入图片和插入链接的语法很想,区别是插入图片前面要加一个[code]![/code]

插入图片的地址需要图床,这里推荐 CloudApp 的服务,生成URL地址即可。


image.png


lrachel


image.png


插入超链接


简书


引用


需要引用一小段别处的句子


这篇文章是在简书上看到的,要用Markdown实现这个样式,只需要在文本前加入>大于号即可,主要所有符号都要是英文状态下才可以。


字体样式


加粗  或者  加粗


斜体  或者 斜体


列表


熟悉HTML的同学都知道列表分为:有序列表和无序列表。在Markdown下,无序列表需要在文字前加上- 或 * 即可;有序列表则直接在文字前加1.2.3.即可,注意符号和文字之间要加一个字符的空格。


无序列表


  • 1


  • 2


  • 3


有序列表


  1. LRachel

   1。  LRachel

    2。 LRachel


  1. LRachel



1.LRachel


2.LRachel


3.LRachel


表格


表格是我觉得 Markdown 比较累人的地方,例子如下:


image.png


表格的代码展示


这里是生成后的样式


image.png


生成后的表格


代码框


如果你是个程序猿,需要在文章里优雅的引用代码框,在 Markdown 下实现也非常简单,只需要用两个 `esc键下的符号 把中间的代码包裹起来。


或者用

这里是样式二内容显示
less than or equal to

lt:less than 小于 le:less than or equal to 小于等于

lt:less than 小于
le:less than or equal to 小于等于
    eq:equal to 等于
ne:not equal to 不等于
ge:greater than or equal to 大于等于
gt:greater than 大于


分割线


分割线的语法只需要另起一行,连续输入三个***。



相关文章
|
27天前
|
Ubuntu Linux 测试技术
Linux系统之部署轻量级Markdown文本编辑器
【10月更文挑战第6天】Linux系统之部署轻量级Markdown文本编辑器
75 1
Linux系统之部署轻量级Markdown文本编辑器
|
3月前
|
存储 安全 数据安全/隐私保护
Django 后端架构开发:富文本编辑器权限管理与 UEditor 、Wiki接入,实现 Markdown 文本编辑器
Django 后端架构开发:富文本编辑器权限管理与 UEditor 、Wiki接入,实现 Markdown 文本编辑器
129 0
|
2月前
|
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 )的使用
|
5月前
|
存储 移动开发 编解码
基于HTML5开发的Markdown在线编辑器
Markdown是一种轻量级标记语言,以其简洁易读的格式而备受程序员和作者们的青睐。随着互联网的发展,越来越多的在线Markdown编辑器应运而生,为用户提供了更加便捷、高效的写作和编辑环境。本文将探讨基于HTML5开发的Markdown在线编辑器的设计原理、功能特点以及技术优势。
118 4
|
30天前
|
Python
tkinter库的应用小示例:文本编辑器
tkinter库的应用小示例:文本编辑器
|
15天前
|
前端开发 开发者
大模型代码能力体验报告之贪吃蛇小游戏《二》:OpenAI-Canvas-4o篇 - 功能简洁的文本编辑器加一点提示词语法糖功能
ChatGPT 的Canvas是一款简洁的代码辅助工具,提供快速复制、版本管理、选取提问、实时编辑、代码审查、代码转写、修复错误、添加日志和注释等功能。相较于 Claude,Canvas 更加简单易用,但缺少预览功能,适合一般开发者使用。
|
3月前
|
前端开发 Python
60行Python代码开发在线markdown编辑器
60行Python代码开发在线markdown编辑器
|
3月前
|
存储 JavaScript 前端开发
Vue中通过集成Quill富文本编辑器实现公告的发布。Vue项目中vue-quill-editor的安装与使用【实战开发应用】
文章展示了在Vue项目中通过集成Quill富文本编辑器实现公告功能的完整开发过程,包括前端的公告发布、修改、删除操作以及后端的数据存储和处理逻辑。
Vue中通过集成Quill富文本编辑器实现公告的发布。Vue项目中vue-quill-editor的安装与使用【实战开发应用】
|
5月前
|
JavaScript 前端开发 C++
vscode编辑器中如何调试nextjs代码
代码可调式的重要性不言而喻。 对于Programer来说,自己编写的程序能够被优雅调试是一件幸福的事情,特别是习惯了后端程序调试的开发者... 在折腾Nextjs项目的日子里,我走了很多弯路才弄明白在vs code中如何优雅的调试代码。
255 1
vscode编辑器中如何调试nextjs代码
文本---富文本编辑器------Vue3使用富文本编辑器,Quill,全局样式和组件和样式的写法
文本---富文本编辑器------Vue3使用富文本编辑器,Quill,全局样式和组件和样式的写法