如何在简书中插入代码的样式之《编辑器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 大于


分割线


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



相关文章
|
2月前
markdown字体大小颜色样式详解
【4月更文挑战第10天】Markdown不直接支持字体样式设置,但可通过HTML标签实现。如用`<font face="字体名">`改变字体,`<font color=颜色值>`改变颜色,`<font size=数字>`调整大小。组合使用如`<font face="黑体" color=green size=5>`可同时设置。注意并非所有Markdown解析器都支持这些语法,使用前需查阅解析器文档。
47 1
|
2月前
|
程序员 Linux iOS开发
一款比Typora更简洁优雅的Markdown编辑器神器(完全开源免费)
一款比Typora更简洁优雅的Markdown编辑器神器(完全开源免费)
105 1
|
26天前
|
存储 移动开发 编解码
基于HTML5开发的Markdown在线编辑器
Markdown是一种轻量级标记语言,以其简洁易读的格式而备受程序员和作者们的青睐。随着互联网的发展,越来越多的在线Markdown编辑器应运而生,为用户提供了更加便捷、高效的写作和编辑环境。本文将探讨基于HTML5开发的Markdown在线编辑器的设计原理、功能特点以及技术优势。
56 4
|
2月前
|
前端开发 C++ iOS开发
几款主流好用的markdown编辑器介绍
几款主流好用的markdown编辑器介绍
133 1
|
14天前
|
JavaScript 前端开发 C++
vscode编辑器中如何调试nextjs代码
代码可调式的重要性不言而喻。 对于Programer来说,自己编写的程序能够被优雅调试是一件幸福的事情,特别是习惯了后端程序调试的开发者... 在折腾Nextjs项目的日子里,我走了很多弯路才弄明白在vs code中如何优雅的调试代码。
vscode编辑器中如何调试nextjs代码
|
2月前
|
存储 移动开发 编解码
基于HTML5开发的Markdown在线编辑器
Markdown是一种轻量级标记语言,以其简洁易读的格式而备受程序员和作者们的青睐。随着互联网的发展,越来越多的在线Markdown编辑器应运而生,为用户提供了更加便捷、高效的写作和编辑环境。本文将探讨基于HTML5开发的Markdown在线编辑器的设计原理、功能特点以及技术优势。
37 1
基于HTML5开发的Markdown在线编辑器
|
2天前
|
Linux C++ 开发者
几款主流好用的markdown编辑器介绍
几款主流好用的markdown编辑器介绍
12 0
|
2月前
|
Web App开发 移动开发 搜索推荐
常见的Markdown在线编辑器
在线Markdown编辑器提供了更加稳定和流畅的用户体验。用户无需下载安装任何软件,只需打开浏览器,即可在任何设备上轻松使用这款编辑器,实现随时随地的写作。基于HTML5的在线Markdown编辑器可实现即时的编辑和预览功能
36 2
|
17天前
Markdown编辑器--冷门实用知识总结
Markdown编辑器--冷门实用知识总结
|
2月前
|
Web App开发 存储 机器学习/深度学习
欢迎使用CSDN-markdown编辑器
欢迎使用CSDN-markdown编辑器
26 0