記事ディレクトリ
1 コードの差分
コードレビューを行ったことがある場合は、次の効果をよく理解しているはずです。
// 数组去重
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 などの言語タイプが続きます。
上記の差分コードは最終的に HTML の次の段落に変換されます (ただし、変換効果はコンバーターによって異なります)。最終的にスタイルを変更することで上記の効果を実現できます。
<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 やることリスト
多くのデモ コードは TodoList を実装します。次の Todo 効果を実現するために Markdown を使用して TodoList を作成します。
- 完成する
- 完了しました
-
元に戻した
原文：
- [ ] 待完成
- [x] 已完成
- [ ] ~~未完成~~
3 画像の幅と高さの設定
本来の書き方は以下の通りですが、![]()
ただし、画像の幅と高さに制限はなく、指定された幅と高さの画像が生成されます。
タグ使用可能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に変換するとタグになるので、Markdownimgでタグを直接記述しimg、幅と高さを追加します。
bash
复制代码// 原始 markdown 语法
// 转化成 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 に送信したところ、役に立たないことが判明しましたが、実際には<br>このときに CSS タグが使用されていました。
<br>
上の行は改行効果です。