当前位置: 首页 > news >正文

markdown高级写作技巧汇总

文章目录

    • 1 代码diff
    • 2 待办事项
    • 3 图片设置宽高
    • 4 折叠
    • 5 锚点链接
      • 实现方式
        • ① Markdown 原始写法 `[名称](#id)`
        • ② HTML 语法 `名称`
    • 6 目录树
    • 7 换行

1 代码diff

如果你做过代码 Code Review,对下面这种效果肯定很熟悉

// 数组去重
const unique = (arr)=>{
-	 return Array.from(new Set(arr))
+  return [...new Set(arr)]
}

这种代码的增删对比效果就是通过 diff 来做的,原始代码如下

```diff
// 数组去重
const unique = (arr)=>{
-	 return Array.from(new Set(arr))
+  return [...new Set(arr)]
}
```

在 Markdown 中,```用来表示代码块,跟在后面的是语言类型,比如 js、java 和 diff 等

上面的 diff 代码最终在 html 中会转换成下面这段(不过在不同转化器中转换效果会有所差异),最终通过修改样式达到上面的效果。

<pre><code>"//&nbsp;数组去重"<br>"const unique = (arr)=>{"<br><span class="deletion">"-  return Array.from(new Set(arr))"</span><br><span class="addition">"+  return [...new Set(arr)]"</span><br>"}"<br></code>
</pre>

2 待办事项

很多 Demo 代码都会实现一个 TodoList,我们用 Markdown 来做一个,实现下面这种 Todo 效果

  • 待完成
  • 已完成
  • 未完成

原始写法:

- [ ] 待完成
-  [x] 已完成
- [ ] ~~未完成~~

3 图片设置宽高

原始写法如下,只有 ![]()

![](https://img-blog.csdnimg.cn/989e88d754f5401b91d95b8b9d853de7.png)

但图片宽高不受限,生成给定宽高的图片:

可使用 img 标签,原始写法

<img src='https://img-blog.csdnimg.cn/989e88d754f5401b91d95b8b9d853de7.png' width=500px height=200px />// 写法二,自动缩放
<img src='https://img-blog.csdnimg.cn/989e88d754f5401b91d95b8b9d853de7.png' width=40% />

因为 ![]() 转化成 html 后就变成 img 标签,所以直接在 Markdown 中写 img 标签并且加上宽高。

bash
复制代码// 原始 markdown 语法
![图片描述](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/13973f2a07bb45feb159aa2584997913~tplv-k3u1fbpfcp-zoom-1.image)// 转化成 html 后语法
<img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/13973f2a07bb45feb159aa2584997913~tplv-k3u1fbpfcp-zoom-1.image" alt="图片描述">

4 折叠

展开查看规范 请关注 [公众号【JavaEdge】](https://mp.weixin.qq.com/s/PVGz50qE1S4xsEsmypVp-g)

用到 <details><summary> 标签

<details>
<summary>展开查看规范</summary>
这是展开后的内容1
</details>

5 锚点链接

一种页面内的超链接。

锚点链接就是点击后会跳转到对应的锚点位置,想到链接跳转就能想到 <a></a> 标签

实现方式

① Markdown 原始写法 [名称](#id)

点击我跳转到目录树

[点击我跳转到目录树](#目录树)

② HTML 语法 <a href="#id">名称</a>

名称

<a href="#目录树">名称</a>

6 目录树

直接在文章使用 [TOC]

会自动转成:

<div class="table-of-contents"><ul><li><a href="">代码diff</a></li>...</ul>
</div>

存在兼容性问题,Github 不支持,可使用 github-markdown-toc 库自动生成,它原理就是自动生成锚标记,然后就可以页面内跳转。

7 换行

Typora换行后发到 github 发现并没有什么卵用,其实这时候使用 CSS 的 <br> 标签。

<br>

上面这一行就是换行效果了。

相关文章:

markdown高级写作技巧汇总

文章目录 1 代码diff2 待办事项3 图片设置宽高4 折叠5 锚点链接实现方式① Markdown 原始写法 [名称](#id)② HTML 语法 名称 6 目录树7 换行 1 代码diff 如果你做过代码 Code Review&#xff0c;对下面这种效果肯定很熟悉 // 数组去重 const unique (arr)>{ - return A…...

SpringBoot自动配置原理入门级理解

简单理解 spring中&#xff0c;我们配置一个bean有两种方式&#xff0c;一种是xml标签的形式&#xff0c;一种是通过java类的形式。那么自动装配就是通过java类的形式来配置bean。 不同的是&#xff0c;springboot将这些我们需要的bean提前配置好了以java类的形式存放在META-I…...

2023 08.02 小记与展望

碎碎念系列更新 算是坚持的第一个月&#xff08;每个月更新一次&#xff0c;上次是6.29&#xff09; 主要对上月工作进行总结&#xff0c;并对后续学习内容进行规划。 一、关于工作 7月工作主要涉及以下方面&#xff1a; 1、公司自研APP维护&#xff08;主要是接口更新和修改…...

MaxPatrol SIEM 增加了一套检测供应链攻击的专业技术

我们为 MaxPatrol SIEM 信息安全事件监控系统增加了一套新的专业技术。 该产品可帮助企业防范与供应链攻击相关的威胁。 此类攻击正成为攻击者的首要目标&#xff1a;它们以软件开发商和供应商为目标&#xff0c;网络犯罪分子通过他们的产品进入最终目标的基础设施。 因此&a…...

蓝桥杯上岸每日N题 第六期(求阶乘)!!!

蓝桥杯上岸每日N题第六期 ❗️ ❗️ ❗️ 同步收录 &#x1f447; 蓝桥杯上岸必背&#xff01;&#xff01;&#xff01;(持续更新中~) 大家好 我是寸铁&#x1f4aa; 冲刺蓝桥杯省一模板大全来啦 &#x1f525; 蓝桥杯4月8号就要开始了 &#x1f64f; 距离蓝桥杯省赛倒数…...

Codeforces Round 889 (Div. 2)(视频讲解A——D)

文章目录 A Dalton the TeacherB Longest Divisors IntervalC2 Dual (hard Version)D Earn or Unlock Codeforces Round 889 (Div. 2)&#xff08;视频讲解A——D&#xff09; A Dalton the Teacher #include<bits/stdc.h> #define endl \n #define INF 0x3f3f3f3f us…...

K8s安全配置:CIS基准与kube-bench工具

01、概述 K8s集群往往会因为配置不当导致存在入侵风险&#xff0c;如K8S组件的未授权访问、容器逃逸和横向攻击等。为了保护K8s集群的安全&#xff0c;我们必须仔细检查安全配置。 CIS Kubernetes基准提供了集群安全配置的最佳实践&#xff0c;主要聚焦在两个方面&#xff1a;主…...

linux安装python和部署Django项目

文章目录 1 python安装2 Django项目部署 1 python安装 官网地址&#xff1a;https://www.python.org/ 本次下载的python安装包地址&#xff1a;https://www.python.org/ftp/python/3.8.16/Python-3.8.16.tgz 解压下载的python压缩包 [rootlocalhost software]# tar -zxvf P…...

00-Hadoop入门

Hadoop入门 Hadoop四高 1&#xff09;高可靠性 Hadoop底层维护多个数据副本&#xff0c;所有即使hadoop某个计算元素或存储故障&#xff0c;也不会造成数据丢失 2&#xff09;高扩展性 在集群间分配任务数据&#xff0c;可方便的扩展数以千计的节点 3&#xff09;高效性 …...

SE-Net注意力机制详解

📌本次任务:了解SE-Net原理 SE-Net 是 ImageNet 2017(ImageNet 收官赛)的冠军模型,是由WMW团队发布。具有复杂度低,参数少和计算量小的优点。且SENet 思路很简单,很容易扩展到已有网络结构如 Inception 和 ResNet 中。(这篇论文是2019年的,应该是后续做了更新) 一…...

商城免费搭建之java商城 开源java电子商务Spring Cloud+Spring Boot+mybatis+MQ+VR全景+b2b2c bbc

&#xfeff; 1. 涉及平台 平台管理、商家端&#xff08;PC端、手机端&#xff09;、买家平台&#xff08;H5/公众号、小程序、APP端&#xff08;IOS/Android&#xff09;、微服务平台&#xff08;业务服务&#xff09; 2. 核心架构 Spring Cloud、Spring Boot、Mybatis、R…...

推理加速 --- torch.compile

推理加速-- torch.compile 一、背景介绍1.2 首次推理速度慢1.3 推理多次之后&#xff0c;又会出现一次速度特别慢的情况&#xff0c;感觉好像是重新优化 二、如何使用三、其他设置3.1 mode 设置3.2 backend3.3 fullgraph3.4 dynamic 参考资料 一、背景介绍 PyTorch 2.0 官宣了…...

JS-----数据结构与算法(2)

目录 三. 栈结构 1.认识栈结构 2. 封装栈结构 3. 应用 3-1 十进制转二进制 3-2 进制转换法 四. 队列 1.队列是什么&#xff1f; 2.队列的封装 3. 队列的应用-击鼓传花 4. 双端队列 5.判断是否为回文 三. 栈结构 1.认识栈结构 栈&#xff08;stack&#xff09;又…...

手把手安装TomCat;并部署JPress

目录 一、了解Tomcat&#xff1a; 二、安装 1、获取Tomcat软件包&#xff0c;且需要Java环境。 2、安装jdk 3、安装Tomcat 1.解压并创建软链接&#xff1a; 2.创建启动用户并更改文件权限&#xff1a; 3.编写系统服务文件&#xff1a; 4.重新加载配置文件并启动tomcat…...

tensorflow1.13分布式训练 参考资料 -教程原理

前言 对于数据量较大的时候&#xff0c;通过分布式训练可以加速训练。相比于单机单卡、单机多卡只需要用with tf.device(‘/gpu:0’)来指定GPU进行计算的情况&#xff0c;分布式训练因为涉及到多台机器之间的分工交互&#xff0c;所以更麻烦一些。本文简单介绍了多机(单卡/多卡…...

DP学习第五篇之礼物的最大价值

DP学习第五篇之礼物的最大价值 剑指 Offer 47. 礼物的最大价值 - 力扣&#xff08;LeetCode&#xff09; 一.题目解析 二. 算法原理 状态表示 tips: 经验题目要求。以[i,j]位置为结尾&#xff0c;。。。 dp[i][j]: 到达[i, j]位置时&#xff0c;此时的最大礼物价值 状态转移…...

cURL error 1: Protocol “https“ not supported or disabled in libcurl

1、php项目composer update报错 2、curl -V检查 发现curl已经支持了https了 3、php版本检查 4、php插件检查 插件也已经含有openssl组件了 5、phpinfo检查 curl是否开启ssl 定位到问题所在&#xff0c;php7.4的 curl扩展不支持 https 需要重装 php7.4的curl扩展 6、curl下载 下…...

XCode升级后QT无法编译的问题

原因是SDK的版本变了&#xff0c;Qt配置的版本要修改。 解决办法如下&#xff1a; 1.找到 /Users/*/Qt/5.15.2/clang_64/mkspecsqdevice.pri 这个文件打开编辑&#xff0c; 在文件末尾追加一句 !host_build:QMAKE_MAC_SDKmacosx13.1 至于这个版本号13.1是怎么来的呢&#xff1…...

springboot编写mp4视频播放接口

简单粗暴方式 直接读取指定文件&#xff0c;用文件流读取视频文件&#xff0c;输出到响应中 GetMapping("/display1/{fileName}")public void displayMp41(HttpServletRequest request, HttpServletResponse response,PathVariable("fileName") String fi…...

华为OD机试真题 JavaScript 实现【机器人活动区域】【2023Q1 200分】,附详细解题思路

目录 一、题目描述二、输入描述三、输出描述四、解题思路五、JavaScript算法源码六、效果展示1、输入2、输出 华为OD机试 2023B卷题库疯狂收录中&#xff0c;刷题点这里 刷的越多&#xff0c;抽中的概率越大&#xff0c;每一题都有详细的答题思路、详细的代码注释、样例测试&am…...

智慧医疗能源事业线深度画像分析(上)

引言 医疗行业作为现代社会的关键基础设施,其能源消耗与环境影响正日益受到关注。随着全球"双碳"目标的推进和可持续发展理念的深入,智慧医疗能源事业线应运而生,致力于通过创新技术与管理方案,重构医疗领域的能源使用模式。这一事业线融合了能源管理、可持续发…...

Qt/C++开发监控GB28181系统/取流协议/同时支持udp/tcp被动/tcp主动

一、前言说明 在2011版本的gb28181协议中&#xff0c;拉取视频流只要求udp方式&#xff0c;从2016开始要求新增支持tcp被动和tcp主动两种方式&#xff0c;udp理论上会丢包的&#xff0c;所以实际使用过程可能会出现画面花屏的情况&#xff0c;而tcp肯定不丢包&#xff0c;起码…...

DeepSeek 赋能智慧能源:微电网优化调度的智能革新路径

目录 一、智慧能源微电网优化调度概述1.1 智慧能源微电网概念1.2 优化调度的重要性1.3 目前面临的挑战 二、DeepSeek 技术探秘2.1 DeepSeek 技术原理2.2 DeepSeek 独特优势2.3 DeepSeek 在 AI 领域地位 三、DeepSeek 在微电网优化调度中的应用剖析3.1 数据处理与分析3.2 预测与…...

2024年赣州旅游投资集团社会招聘笔试真

2024年赣州旅游投资集团社会招聘笔试真 题 ( 满 分 1 0 0 分 时 间 1 2 0 分 钟 ) 一、单选题(每题只有一个正确答案,答错、不答或多答均不得分) 1.纪要的特点不包括()。 A.概括重点 B.指导传达 C. 客观纪实 D.有言必录 【答案】: D 2.1864年,()预言了电磁波的存在,并指出…...

【C++从零实现Json-Rpc框架】第六弹 —— 服务端模块划分

一、项目背景回顾 前五弹完成了Json-Rpc协议解析、请求处理、客户端调用等基础模块搭建。 本弹重点聚焦于服务端的模块划分与架构设计&#xff0c;提升代码结构的可维护性与扩展性。 二、服务端模块设计目标 高内聚低耦合&#xff1a;各模块职责清晰&#xff0c;便于独立开发…...

【Go语言基础【13】】函数、闭包、方法

文章目录 零、概述一、函数基础1、函数基础概念2、参数传递机制3、返回值特性3.1. 多返回值3.2. 命名返回值3.3. 错误处理 二、函数类型与高阶函数1. 函数类型定义2. 高阶函数&#xff08;函数作为参数、返回值&#xff09; 三、匿名函数与闭包1. 匿名函数&#xff08;Lambda函…...

基于PHP的连锁酒店管理系统

有需要请加文章底部Q哦 可远程调试 基于PHP的连锁酒店管理系统 一 介绍 连锁酒店管理系统基于原生PHP开发&#xff0c;数据库mysql&#xff0c;前端bootstrap。系统角色分为用户和管理员。 技术栈 phpmysqlbootstrapphpstudyvscode 二 功能 用户 1 注册/登录/注销 2 个人中…...

毫米波雷达基础理论(3D+4D)

3D、4D毫米波雷达基础知识及厂商选型 PreView : https://mp.weixin.qq.com/s/bQkju4r6med7I3TBGJI_bQ 1. FMCW毫米波雷达基础知识 主要参考博文&#xff1a; 一文入门汽车毫米波雷达基本原理 &#xff1a;https://mp.weixin.qq.com/s/_EN7A5lKcz2Eh8dLnjE19w 毫米波雷达基础…...

LLaMA-Factory 微调 Qwen2-VL 进行人脸情感识别(二)

在上一篇文章中,我们详细介绍了如何使用LLaMA-Factory框架对Qwen2-VL大模型进行微调,以实现人脸情感识别的功能。本篇文章将聚焦于微调完成后,如何调用这个模型进行人脸情感识别的具体代码实现,包括详细的步骤和注释。 模型调用步骤 环境准备:确保安装了必要的Python库。…...

高效的后台管理系统——可进行二次开发

随着互联网技术的迅猛发展&#xff0c;企业的数字化管理变得愈加重要。后台管理系统作为数据存储与业务管理的核心&#xff0c;成为了现代企业不可或缺的一部分。今天我们要介绍的是一款名为 若依后台管理框架 的系统&#xff0c;它不仅支持跨平台应用&#xff0c;还能提供丰富…...