首页 > 其他分享 >洛谷 Markdown - 从入门到精通

洛谷 Markdown - 从入门到精通

时间:2024-07-28 23:17:12浏览次数:13  
标签:Markdown 工具栏 入门 渲染 标题 洛谷 斜体

洛谷 Markdown - 从入门到精通

编写——Jerrycyx(CSDN,洛谷

洛谷博客查看

绪论

希望更丰富的展现?使用 Markdown。

这是洛谷文字编辑时会出现的一行文字。这是你可能会疑惑:Markdown 是什么?为什么洛谷的文字编辑区如此奇怪? 本文将为你揭开这些问题,并使你短时间精通 Markdown

什么是 Markdown?

Markdown 是一种轻量级标记语言

什么意思呢?就是说,你需要写下一段内容(【源代码】),然后洛谷会自动帮你渲染这段内容。

举个例子你就明白了:

比方说你输入的是 _Haha_(两侧带下划线),那么洛谷就会帮你渲染成 Haha (变成斜体)。

洛谷的文字编辑使用 Markdown*Palettes(GitHub 地址:https://github.com/luogu-dev/markdown-palettes),Markdown 的一种。

还有,不要被【源代码】吓到,Markdown 极其简单,一共的标记符号也就十多个。

现在,就让我们开始学习吧!

Markdown 编辑器

以下以洛谷云剪贴板的 Markdown 编辑器为例:

Markdown 编辑器

我们可以把这个编辑器分成三部分:

  • 工具栏

工具栏

  • 编辑区(左侧)

编辑区

  • 预览区(右侧)

预览区

  • 工具栏内有洛谷 Markdown 常用的标记符号(但不是所有),但是精通 Markdown 以后都基本不会用工具栏了。

  • 你可以在编辑区内书写源代码

  • 预览区是洛谷将你的源代码渲染后展示的结果,也是发布后显示的内容预览区不可直接修改

Markdown 语法

标题

Markdown 共有六级标题。标记符号是 #。只需要在文字前面加上若干个 # 和一个空格,就可以将这段文字渲染为标题。

标题有几个 #,这就是几级标题。一级标题最大,六级标题最小。

标题在工具栏上的对应是 H1H2H3...
工具栏-标题

H1 代表一级标题,H2 代表二级标题,以此类推。

例:

# 一级标题

## 二级标题

### 三级标题

#### 四级标题

##### 五级标题

###### 六级标题

将会被渲染成

一级标题

二级标题

三级标题

四级标题

五级标题
六级标题

注:前面的渲染结果左边有一条竖线且字体改变是因为:为了避免影响整篇文章的排版,所以采用了“引用”的方法。实际渲染效果是没有竖线和改变字体的。

几点细节:

  • 一级标题和二级标题自带分割线(这篇博客没有显示是因为博客的渲染机制和洛谷其它地方不一样)。

  • 四级标题的字体大小已经比正文还小了,所以正常来说一般不用四级以下的标题。

  • 输入时,# 后面一定要加空格。

加粗

Markdown 中的加粗用左右各两个 * 表示。

在工具栏上,加粗为符号 B,即

B

例如:

**加粗文字**

将会被渲染成

加粗文字

  • 小技巧:选中待加粗的文字,点击工具栏符号 B,即可将这一段文字加粗。
  1. 选中

  1. 点击 B

  1. 加粗成功

斜体

Markdown 中的 斜体 用左右各一个 _ 或左右各一个 * 表示。

在工具栏上,斜体为符号 I ,即

I

例如:

_斜体文字_

*斜体文字*

将会被渲染成

斜体文字

斜体文字

  • 小技巧:选中需要转成斜体的文字,点击工具栏符号 I,即可将这一段文字转为斜体。

  • 注意:斜体文字的源代码需要和其它文字有空格隔开。

哈_哈哈哈_哈 是不能正常渲染的:哈_哈哈哈_哈

哈 _哈哈哈_ 哈 则是可以正常渲染的:哈 哈哈哈

删除线

Markdown 中的删除线用左右各两个 ~ 表示。

在工具栏上,斜体为符号 S ,即

S

例如:

~~删除文字~~

将会被渲染成

删除文字

  • 小技巧:选中需要添加删除线的文字,点击工具栏符号 S,即可为这一段文字添加删除线。

分割线

洛谷 Markdown 中的分割线显示效果如下:


分割线在工具栏上对应的符号是 ,即:

—

点击
后会自动生成:


------------

(先两个换行,再 \(12\) 个 -,最后再来两个换行)

渲染后为:


分割线的手动输入方法有很多种:

---
- - -
***
* * *
___
_ _ _

渲染出来是:







(咦?博客里好像不太清晰?)

注:

  • -_* 打多少个都可以(必须大于等于三个)

无序列表&有序列表

无序列表和有序列表在工具栏上是这两个符号:

无序列表&有序列表

(左边是点的是无序列表,左边是数字的是有序列表)

这里并不推荐用工具栏,最好手写,因为工具栏上的列表有很大的 BUG。

有序列表很简单,用“数字加点”的格式直接列就行了:

1. 第一条
2. 第二条
3. 第三条
  1. 第一条
  2. 第二条
  3. 第三条

中间空行也可以(显得不那么挤):

1. 第一条

2. 第二条

3. 第三条
  1. 第一条

  2. 第二条

  3. 第三条

无序列表也差不多:

+ 哈哈哈

- 哈哈哈

* 哈哈哈

  • 哈哈哈
  • 哈哈哈
  • 哈哈哈
  • +-* 都可以正常渲染无序列表,但是这里推荐用 +,因为 -* 都有其它的用途,混用可能会出事故。

  • 无序列表的 +-* 和有序列表的“数字+点”后一定要加空格,否则无法正常渲染。

图片

图片在工具栏上长这样:

img

这里有两个重点:

  • 图片地址指的是图片 URL 链接:Markdown 只能读取上传到网上的图片,在你电脑里的图片它读取不到(其实所有网络上需要图片的地方都是这样)。所以你需要通过图床将在电脑磁盘内的图片上传到网络上,再把这张图片的网络地址(即 URL 链接)告诉 Markdown。这里推荐几个图床:

洛谷图床

  • 图片描述一般不会显示,但是当原图片损坏或无法显示时,就会显示图片描述

图片的 Markdown 格式如下:

![图片描述(可留空)](图片 URL 地址)

例如:

![Luogu-Logo](https://cdn.luogu.com.cn/fe/logo.png)

Luogu-Logo

如果图片无法显示则会显示出:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-L7byHKK9-1662426318555)(hahaha)]

链接

链接在工具栏上长这样:

链接

  • 链接地址:点击链接后跳转的网站地址

  • 链接标题:链接显示的内容

链接的格式如下:

[链接标题](链接地址)

例如:

[洛谷](https://www.luogu.com.cn/)

洛谷

还有一种链接表示方式,没有链接标题,直接显示链接地址:

<链接地址>

例如:

<https://www.luogu.com.cn/>

https://www.luogu.com.cn/

代码块

代码块分两种:行内代码块和行外代码块

行内代码块类似这种:代码块

方法很简单:只需要在两边加上 ` 即可。

`代码块`

代码块

(行外)代码块的工具栏符号是:

代码块

行外代码块格式如下:

```代码语言

代码内容

```

例如:

code

#include <cstdio>
using namespace std;

int main()
{
    int a,b;
    scanf("%d%d",&a,&b);
    printf("%d\n", a+b);
    return 0;
}
  • 代码语言就是 cpp、c、python 之类的(也可以留空)

表格

表格的格式略微复杂,用工具栏上的按钮就行了。

表格

| 标题1 | 标题2 | 标题3 | 标题4 |
| -----------: | -----------: | -----------: | -----------: |
| 内容1,1 | 内容1,2 | 内容1,3 | 内容1,4 |
| 内容2,1 | 内容2,2 | 内容2,3 | 内容2,4 |
标题1 标题2 标题3 标题4
内容1,1 内容1,2 内容1,3 内容1,4
内容2,1 内容2,2 内容2,3 内容2,4

\(\KaTeX\) 内嵌

洛谷中的题解、翻译、题目中,数字、公式都必须用 \(\KaTeX\) 来写。方法是:

$1+1=2$ 被渲染成 \(1+1=2\)

$$1+1=2$$ 被渲染成(单独一行且居中)

\[1+1=2 \]

\(\KaTeX\) 又是另外一种语言了,下次再另写一篇文章吧。可以先看看这个:

工具栏上的其它符号

工具栏上的其它符号

从左往右依次为:

  • 隐藏预览:隐藏预览,只显示源代码编辑部分。

  • 全屏:全屏 Markdown 编辑区

  • 停用滚动同步:滚动同步就是你左边/右边的内容翻到哪里,另一边的内容也跟着翻到哪里。点击这个按钮会停用这个功能。

  • 关于:点击会出现洛谷 Markdown 的信息和 GitHub 项目地址。

  • 自动排版:貌似没什么用。

洛谷 Markdown 和其它 Markdown 不一样的地方

  • 洛谷 Markdown 如果要在最终显示上换行,源代码需要换行两次(即中间空一行)。

  • 洛谷 Markdown 不支持 HTML 嵌入。

  • 洛谷 Markdown 内嵌 \(\KaTeX\),而其它大多数都是内嵌 \(\LaTeX\)。

  • 洛谷 Markdown 不支持 ==text== 高亮语法。

(好像还有一大堆,但是懒得找了)

最后的最后

别忘了点个赞哦 QwQ!

标签:Markdown,工具栏,入门,渲染,标题,洛谷,斜体
From: https://www.cnblogs.com/jerrycyx/p/18329138

相关文章

  • final cut pro 入门
    浏览窗口相关范围选择:i开始o结束;按住command拖拽;command+shift+i/o也可以选择多个。option+x取消选择。时间线相关范围选择:i开始o结束浏览窗口的片段插入到时间线窗口前提:在浏览窗口进行范围选择好相应片段(可使用i/o选择好开始与结束范围)按Q可以放到主......
  • 计算机小白入门之选购电脑
    前言​这篇文章将带领计算机小白全面地了解如何选择电脑。我的文章不会像其他很多文章一样直接推荐电脑,而是教会读者知识与方法,然后自己去选电脑,这样一来读者才能选出最合心意的电脑。这是我的第一篇文章,如果读者发现有错误或不足,希望能理解并指出来,我会尽快进行更正。......
  • C++从入门到起飞之——内存管理(万字详解) 全方位剖析!
    ......
  • Elasticsearch 入门实战(9)--Java API Client 使用二
    本文继续上文(Elasticsearch入门实战(5)--JavaAPIClient使用一(Index,Document,Ingest,SQLAPIs))介绍 JavaAPIClient,相关的环境及软件信息如下:CentOS 7.6.1810、Java1.8.0_341(客户端用)、Elasticsearch8.13.4、elasticsearch-java8.13.4。1、SearchAPIs1.1、Count......
  • jQuery入门(一)
    一、JQuery介绍-jQuery是一个JavaScript库。-所谓的库,就是一个JS文件,里面封装了很多预定义的函数,比如获取元素,执行隐藏、移动等,目的就是在使用时直接调用,不需要再重复定义,这样就可以极大地简化了JavaScript编程。-jQuery官网:https://www.jquery.com二、JQue......
  • 洛谷Day1--P1102 A-B数对 P1163 银行贷款
    目录一、引言二、题目及题解题目一:P1102A-B数对题目链接题解:哈希 题目二:P1163银行贷款题目链接题解:二分 三、小结一、引言今天是周日,代码随想录训练营的打卡休息一天。想着刷一点题巩固一下之前的所学,就做了两道洛谷的题,一道用的哈希(也可以二分,个人感觉麻烦......
  • Python爬虫入门01:在Chrome浏览器轻松抓包
    文章目录爬虫基本概念爬虫定义爬虫工作原理爬虫流程爬虫类型爬虫面临的挑战使用Chrome浏览器抓包查看网页HTML代码查看HTTP请求请求头(RequestHeader)服务器响应抓包的意义爬虫基本概念爬虫定义爬虫(WebCrawler或Spider)是一种自动浏览互联网的程序,它按照一定的......
  • Java入门
    day1入门常见的CMD命令打开cmd:win+R输入CMD按下回车键打开我的电脑:win+E盘符名称+冒号说明:盘符切换举例:E:(冒号为英文输入法)回车,表示切换到E盘dir说明:查看当前路径下的所有内容(该文件夹下的所有内容)cd目录说明:进入单级目录举例:cditheima特别说明:itheima(过长......
  • django学习入门系列之第五点《javascript的条件语句和函数》
    文章目录5.6条件语句5.7函数往期回顾5.6条件语句if(){}elseif(){}5.7函数#python中函数定义的格式deffunc{函数的内容}#使用函数func()//javascript函数中的内容functionfunc(){函数的内容}//使用函数func()往......
  • 智能PDF转markdown
    嘿,各位技术大咖们,今天我要给大家带来一个超酷的项目——“智能PDF转Markdown”,这可是数字化办公的神器,基于Marker技术,让PDF文档秒变Markdown,轻松应对RAG知识库构建等任务的挑战!打造了一款PDF转Markdown的利器在线体验:智能PDF转markdownMarker,由技术社区的大神们打造,是......