Directorio de artículos
1 código de diferencia
Si ha realizado una revisión de código, debe estar familiarizado con el siguiente efecto
// 数组去重
const unique = (arr)=>{
- return Array.from(new Set(arr))
+ return [...new Set(arr)]
}
El efecto de comparación de adición y eliminación de este código se realiza a través de diff. El código original es el siguiente
```diff
// 数组去重
const unique = (arr)=>{
- return Array.from(new Set(arr))
+ return [...new Set(arr)]
}
```
En Markdown, ``` se usa para indicar un bloque de código, seguido de tipos de lenguaje, como js, java y diff, etc.
El código de diferencias anterior eventualmente se convertirá en el siguiente párrafo en html (pero el efecto de conversión será diferente en diferentes convertidores), y finalmente el efecto anterior se puede lograr modificando el estilo.
<pre>
<code>
"// 数组去重"
<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 lista de tareas pendientes
Muchos códigos de demostración implementarán un TodoList, usamos Markdown para hacer uno para lograr el siguiente efecto Todo
- a completar
- terminado
-
deshecho
Escritura original:
- [ ] 待完成
- [x] 已完成
- [ ] ~~未完成~~
3 ajustes de ancho y alto de imagen
El método de escritura original es el siguiente, solo![]()
Sin embargo, el ancho y el alto de la imagen no están limitados, y se genera una imagen con un ancho y alto determinados:
Se pueden usar etiquetas img, escritura original
<img src='https://img-blog.csdnimg.cn/989e88d754f5401b91d95b8b9d853de7.png' width=500px height=200px />
// 写法二，自动缩放
<img src='https://img-blog.csdnimg.cn/989e88d754f5401b91d95b8b9d853de7.png' width=40% />
Porque ![]()después de convertirse en html, se convierte en imguna etiqueta, así que escriba directamente la etiqueta en Markdown imgy agregue el ancho y la altura.
bash
复制代码// 原始 markdown 语法
// 转化成 html 后语法
<img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/13973f2a07bb45feb159aa2584997913~tplv-k3u1fbpfcp-zoom-1.image" alt="图片描述">
4 veces
Expanda y vea la especificación, preste atención a [cuenta pública [JavaEdge]] (https://mp.weixin.qq.com/s/PVGz50qE1S4xsEsmypVp-g)usados <details>y <summary>etiquetas
<details>
<summary>展开查看规范</summary>
这是展开后的内容1
</details>
5 enlaces ancla
Un tipo de hipervínculo dentro de una página.
El enlace de anclaje es para saltar a la posición de anclaje correspondiente después de hacer clic. Cuando piensas en el salto de enlace, puedes pensar en <a></a>la etiqueta
Método para realizar
① Markdown escritura original[名称](#id)
Haga clic en mí para saltar al árbol de directorios
[点击我跳转到目录树](#目录树)
② Sintaxis HTML<a href="#id">名称</a>
<a href="#目录树">名称</a>
6 árbol de directorios
directamente en el artículo [TOC]
se convertirá automáticamente en:
<div class="table-of-contents">
<ul>
<li><a href="">代码diff</a></li>
...
</ul>
</div>
Hay un problema de compatibilidad y Github no lo admite. Se puede generar automáticamente usando la biblioteca github-markdown-toc. Su principio es generar automáticamente etiquetas de anclaje, y luego puedes saltar dentro de la página.
7 nueva línea
Después de que Typora cambió la línea y la envió a github, se descubrió que era inútil. De hecho, <br>en ese momento se usaban etiquetas CSS.
<br>
La línea de arriba es el efecto de nueva línea.