Markdown基础(内含:锚点使用,使用HTML,新页面跳转,目录生成)

Github样式显示参考:点我
之前说过用word写文章,这次说说Markdown写文章(推荐)
逆天推荐使用VSCode编写

装这个插件写作更方便:


内含:锚点使用,使用HTML,新页面跳转,目录生成

启用方式:

H1~H3(#的个数)[博客园只支持H1~3]

# H1
## H2
### H3

H1

H2

H3

斜体(一个*斜体),加粗(两个*粗体),删除线(两个~)

**加粗内容** 其他内容 *斜体内容* ~~删除内容~~

加粗内容 其他内容 斜体内容 删除内容

引用(> or >>)、代码块(```开头结尾)、分隔符(---)、换行(空一行 或者 br标签 )、转义( \ )

引用:

>引用 | 块注释
>从前有座山,山里有座庙
>>里面再来个引用

引用 | 块注释
从前有座山,山里有座庙

里面再来个引用

单个代码块:
以`(反引号)开头
以`(反引号)结尾

Python and NetCore

代码块:
以```(反引号)开头
以```(~下面的符合)结尾

如果要语法高亮就在```后面加小写语言名,eg:html,css,javascript,python,cs(csharp)等等

print("以 ```python开头,```结尾")
var infos_list = new List<object>() { "C#", "JavaScript" };
var infos_list = new List<object>() { "C#", "JavaScript" };

分隔符:

---

换行:

<br/>
<br/>
<br/>






转义字符

\<br/>

<br/>

HTML代码

直接写HTML就可以解析:

<div>
    <code>
        print("mmd")
    </code>
</div>
print("mmd")

超链接、图片、锚点跳转

超链接:

页面内打开:[超链接文字](url)
写法1:
汇总系列:[链接](https://www.cnblogs.com/dunitian/p/4822808.html#ai)

写法2:
汇总系列:<https://www.cnblogs.com/dunitian/p/4822808.html#ai>

汇总系列:https://www.cnblogs.com/dunitian/p/4822808.html#ai

汇总系列:https://www.cnblogs.com/dunitian/p/4822808.html#ai


新页面打开:[超链接文字](url){:target="_blank"} (有些编辑器不支持,Python Markdown可以使用)
不支持就用:<a href="xxx" target="_blank">xxx</a>

写法1:
汇总系列:[链接](https://www.cnblogs.com/dunitian/p/4822808.html#ai){:target="_blank"}

写法2:
汇总系列:<https://www.cnblogs.com/dunitian/p/4822808.html#ai>{:target="_blank"}

写法3:
汇总系列:<a href="https://www.cnblogs.com/dunitian/p/4822808.html#ai" target="_blank">链接</a>

汇总系列:https://www.cnblogs.com/dunitian/p/4822808.html#ai{:target="_blank"}

汇总系列:https://www.cnblogs.com/dunitian/p/4822808.html#ai{:target="_blank"}

汇总系列:https://www.cnblogs.com/dunitian/p/4822808.html#ai


图片:(感叹号别忘记了)

![alt标题](url地址)
![博客园logo](https://www.cnblogs.com/images/logo_small.gif)

博客园logo

锚点:(不能实现的就用html实现即可)

我在正文开头定义了一个:<a name="divtop"></a>
我们跳转过去:[跳转指定位置](#divtop)

跳转指定位置

表格

|xxx|xxx|
|---|---|
|xxx|xxx|
xxx xxx
xxx xxx

eg:

| 字母 | 发音   | 字母 | 发音        |
| ---- | ------ | ---- | ----------- |
| Aa   | [ei]   | Nn   | [en]        |
| Bb   | [bi:]  | Oo   | [əu]        |
| Cc   | [si:]  | Pp   | [pi:]       |
| Dd   | [di:]  | Qq   | [kju:]      |
| Ee   | [i:]   | Rr   | [a:]        |
| Ff   | [ef]   | Ss   | [es]        |
| Gg   | [dʒi:] | Tt   | [ti:]       |
| Hh   | [eitʃ] | Uu   | [iu:]       |
| Ii   | [ai]   | Vv   | [vi:]       |
| Jj   | [dʒei] | Ww   | ['dʌblju:]  |
| Kk   | [kei]  | Xx   | [eks]       |
| Ll   | [el]   | Yy   | [wai]       |
| Mm   | [em]   | Zz   | [zi:]/[zed] |
字母 发音 字母 发音
Aa [ei] Nn [en]
Bb [bi:] Oo [əu]
Cc [si:] Pp [pi:]
Dd [di:] Qq [kju:]
Ee [i:] Rr [a:]
Ff [ef] Ss [es]
Gg [dʒi:] Tt [ti:]
Hh [eitʃ] Uu [iu:]
Ii [ai] Vv [vi:]
Jj [dʒei] Ww ['dʌblju:]
Kk [kei] Xx [eks]
Ll [el] Yy [wai]
Mm [em] Zz [zi:]/[zed]

列表(无序- 有序 1.2.3. 注意空格)

- 无序列表1
    - 无序列表1.1
    - 无序列表1.2
        - 1.2.1
- 无序列表2
    1. 有序列表1
    2. 有序列表2
    3. 有序列表3
        1. 3.1
        2. 3.2
            1. 3.2.1
            2. 3.2.2
- 无序列表3
  • 无序列表1
    • 无序列表1.1
    • 无序列表1.2
      • 1.2.1
  • 无序列表2
    1. 有序列表1
    2. 有序列表2
    3. 有序列表3
      1. 3.1
      2. 3.2
        • 3.2.1
        • 3.2.2
  • 无序列表3

隐藏代码(推荐)

这个在Github上没问题,博客园上有点小问题

<details>
<summary>案例标题</summary>

</span><span class="hljs-string">` 隐藏的代码内容 ​`</span><span class="hljs-string">

</details>

案例1:求和
def sum(a,b):
    return a+b
​```

</details>
<hr>
<a name="_map11"></a><h2 id="目录生成就用js实现了markdown的方式太累">目录生成就用js实现了,MarkDown的方式太累</h2>
<p>博客园上传js文件,然后引用即可</p>
<pre class="javascript"><code class="hljs">$(<span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) </span>{
    <span class="hljs-comment">// 生成目录索引列表</span>
    <span class="hljs-keyword">var</span> mainContent = $(<span class="hljs-string">'#cnblogs_post_body'</span>);
    <span class="hljs-keyword">var</span> h2_list = $(<span class="hljs-string">'#cnblogs_post_body h2'</span>);<span class="hljs-comment">//如果你的章节标题不是h2,只需要将这里的h2换掉即可</span>

    <span class="hljs-keyword">if</span> (mainContent.length &lt; <span class="hljs-number">1</span>)
        <span class="hljs-keyword">return</span>;

    <span class="hljs-keyword">if</span> (h2_list.length &gt; <span class="hljs-number">0</span>) {
        <span class="hljs-keyword">var</span> content = <span class="hljs-string">'&lt;a name="_labelTop"&gt;&lt;/a&gt;'</span>;
        content += <span class="hljs-string">'&lt;div id="navCategory"&gt;'</span>;
        content += <span class="hljs-string">'&lt;p style="font-size:18px"&gt;&lt;b&gt;目录&lt;/b&gt;&lt;/p&gt;'</span>;
        content += <span class="hljs-string">'&lt;ul&gt;'</span>;
        <span class="hljs-keyword">for</span> (<span class="hljs-keyword">var</span> i = <span class="hljs-number">0</span>; i &lt; h2_list.length; i++) {
            <span class="hljs-keyword">var</span> go_to_top = <span class="hljs-string">'&lt;div style="text-align: right"&gt;&lt;a href="#_labelTop"&gt;回到顶部&lt;/a&gt;&lt;a name="_label'</span> + i + <span class="hljs-string">'"&gt;&lt;/a&gt;&lt;/div&gt;'</span>;
            $(h2_list[i]).before(go_to_top);

            <span class="hljs-keyword">var</span> h3_list = $(h2_list[i]).nextAll(<span class="hljs-string">"h3"</span>);
            <span class="hljs-keyword">var</span> li3_content = <span class="hljs-string">''</span>;
            <span class="hljs-keyword">for</span> (<span class="hljs-keyword">var</span> j = <span class="hljs-number">0</span>; j &lt; h3_list.length; j++) {
                <span class="hljs-keyword">var</span> tmp = $(h3_list[j]).prevAll(<span class="hljs-string">'h2'</span>).first();
                <span class="hljs-keyword">if</span> (!tmp.is(h2_list[i]))
                    <span class="hljs-keyword">break</span>;
                <span class="hljs-keyword">var</span> li3_anchor = <span class="hljs-string">'&lt;a name="_label'</span> + i + <span class="hljs-string">'_'</span> + j + <span class="hljs-string">'"&gt;&lt;/a&gt;'</span>;
                $(h3_list[j]).before(li3_anchor);
                li3_content += <span class="hljs-string">'&lt;li&gt;&lt;a href="#_label'</span> + i + <span class="hljs-string">'_'</span> + j + <span class="hljs-string">'"&gt;'</span> + $(h3_list[j]).text() + <span class="hljs-string">'&lt;/a&gt;&lt;/li&gt;'</span>;
            }

            <span class="hljs-keyword">var</span> li2_content = <span class="hljs-string">''</span>;
            <span class="hljs-keyword">if</span> (li3_content.length &gt; <span class="hljs-number">0</span>)
                li2_content = <span class="hljs-string">'&lt;li&gt;&lt;a href="#_label'</span> + i + <span class="hljs-string">'"&gt;'</span> + $(h2_list[i]).text() + <span class="hljs-string">'&lt;/a&gt;&lt;ul&gt;'</span> + li3_content + <span class="hljs-string">'&lt;/ul&gt;&lt;/li&gt;'</span>;
            <span class="hljs-keyword">else</span>
                li2_content = <span class="hljs-string">'&lt;li&gt;&lt;a href="#_label'</span> + i + <span class="hljs-string">'"&gt;'</span> + $(h2_list[i]).text() + <span class="hljs-string">'&lt;/a&gt;&lt;/li&gt;'</span>;
            content += li2_content;
        }
        content += <span class="hljs-string">'&lt;/ul&gt;'</span>;
        content += <span class="hljs-string">'&lt;/div&gt;&lt;p&gt;&amp;nbsp;&lt;/p&gt;'</span>;
        content += <span class="hljs-string">'&lt;p style="font-size:18px"&gt;&lt;b&gt;正文&lt;/b&gt;&lt;/p&gt;'</span>;
        <span class="hljs-keyword">if</span> ($(<span class="hljs-string">'#cnblogs_post_body'</span>).length != <span class="hljs-number">0</span>) {
            $($(<span class="hljs-string">'#cnblogs_post_body'</span>)[<span class="hljs-number">0</span>]).prepend(content);
        }
    }
    <span class="hljs-keyword">var</span> allinfo = <span class="hljs-string">'&lt;p&gt;&lt;strong&gt;汇总系列:&lt;a href="https://www.cnblogs.com/dotnetcrazy/p/9160514.html" target="_blank"&gt;https://www.cnblogs.com/dotnetcrazy/p/9160514.html&lt;/a&gt;&lt;/strong&gt;&lt;/p&gt;'</span>;
    $(mainContent[<span class="hljs-number">0</span>]).prepend(allinfo);
});</code></pre>
<a name="_map12"></a><h2 id="更多语法请参考">更多语法请参考</h2>
<p><a href="https://daringfireball.net/projects/markdown/syntax" class="uri">https://daringfireball.net/projects/markdown/syntax</a></p>
<a name="_map13"></a><h2 id="关于vscode写作的扩展">关于VSCode写作的扩展</h2>
<a name="_map14"></a><h3 id="快捷键">快捷键</h3>
<p><img src="https://images2018.cnblogs.com/blog/1127869/201806/1127869-20180621094349181-1611499244.png"></p>
<a name="_map15"></a><h3 id="生成目录">生成目录</h3>
<p>按F1,然后输入 <strong>ctoc</strong><br>
<img src="https://images2018.cnblogs.com/blog/1127869/201806/1127869-20180621094413315-1192026417.png"></p>
<p>效果如下:<br>
<img src="https://images2018.cnblogs.com/blog/1127869/201806/1127869-20180621094618723-662710246.png"></p>
<p>按F1,输入 <strong>utoc</strong> 就会更新目录,更新过一次后,你以后Ctrl+S就会自动更新目录,很方便的</p>
<p>这个目录在vscode、github中是可以跳转的,你如果需要在博客里面生成对应的文章目录需要配合js实现</p>

</div>
<div id="MySignature" style="display: block;"><div>
  作者:<a href="http://dunitian.cnblogs.com/" target="_blank">毒逆天</a></div>
<div>
  出处:<a href="https://www.cnblogs.com/dotnetcrazy" target="_blank">https://www.cnblogs.com/dotnetcrazy</a>
</div>
<div>
  打赏:<b>18i4JpL6g54yAPAefdtgqwRrZ43YJwAV5z</b>
</div>
<div>
 <div><a name="dntbottom">本文版权归作者和博客园共有。欢迎转载,但必须保留此段声明,且在文章页面明显位置给出原文连接!</a></div>
</div></div>
<div class="clear"></div>
<div id="blog_post_info_block"><div id="BlogPostCategory">
    分类: 
            <a href="https://www.cnblogs.com/dotnetcrazy/category/977886.html" target="_blank">Linux</a></div>
<div id="EntryTag">
    标签: 
            <a href="https://www.cnblogs.com/dotnetcrazy/tag/markdown/">markdown</a></div>

    <div id="blog_post_info">
<div id="green_channel">
        <a href="javascript:void(0);" id="green_channel_digg" onclick="DiggIt(9180295,cb_blogId,1);green_channel_success(this,'谢谢推荐!');">好文要顶</a>
        <a id="green_channel_follow" onclick="follow('070c9379-9f0a-e711-845c-ac853d9f53ac');" href="javascript:void(0);">关注我</a>
    <a id="green_channel_favorite" onclick="AddToWz(cb_entryId);return false;" href="javascript:void(0);">收藏该文</a>
    <a id="green_channel_weibo" href="javascript:void(0);" title="分享至新浪微博" onclick="ShareToTsina()"><img src="https://common.cnblogs.com/images/icon_weibo_24.png" alt=""></a>
    <a id="green_channel_wechat" href="javascript:void(0);" title="分享至微信" onclick="shareOnWechat()"><img src="https://common.cnblogs.com/images/wechat.png" alt=""></a>
</div>
<div id="author_profile">
    <div id="author_profile_info" class="author_profile_info">
            <a href="https://home.cnblogs.com/u/dotnetcrazy/" target="_blank"><img src="https://pic.cnblogs.com/face/1127869/20170317072623.png" class="author_avatar" alt=""></a>
        <div id="author_profile_detail" class="author_profile_info">
            <a href="https://home.cnblogs.com/u/dotnetcrazy/">鲲逸鹏</a><br>
            <a href="https://home.cnblogs.com/u/dotnetcrazy/followees/">关注 - 31</a><br>
            <a href="https://home.cnblogs.com/u/dotnetcrazy/followers/">粉丝 - 120</a>
        </div>
    </div>
    <div class="clear"></div>
    <div id="author_profile_honor"></div>
    <div id="author_profile_follow">
                <a href="javascript:void(0);" onclick="follow('070c9379-9f0a-e711-845c-ac853d9f53ac');return false;">+加关注</a>
    </div>
</div>
<div id="div_digg">
    <div class="diggit" onclick="votePost(9180295,'Digg')">
        <span class="diggnum" id="digg_count">8</span>
    </div>
    <div class="buryit" onclick="votePost(9180295,'Bury')">
        <span class="burynum" id="bury_count">0</span>
    </div>
    <div class="clear"></div>
    <div class="diggword" id="digg_tips">
    </div>
</div>

<script type="text/javascript">
    currentDiggType = 0;
</script></div>
    <div class="clear"></div>
    <div id="post_next_prev">

    <a href="https://www.cnblogs.com/dotnetcrazy/p/9175950.html" class="p_n_p_prefix">« </a> 上一篇:    <a href="https://www.cnblogs.com/dotnetcrazy/p/9175950.html" title="发布于 2018-06-13 13:22">Python3 与 C# 基础语法对比(Function专栏)</a>
    <br>
    <a href="https://www.cnblogs.com/dotnetcrazy/p/9192089.html" class="p_n_p_prefix">» </a> 下一篇:    <a href="https://www.cnblogs.com/dotnetcrazy/p/9192089.html" title="发布于 2018-06-17 09:21">Python3开发过程常见的异常(最近更新:2019-04-26)</a>

</div>
</div>
            </div>
posted @ 2019-08-11 00:39  sogeisetsu  阅读(643)  评论(0编辑  收藏  举报