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

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

装这个插件写作更方便:

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

启用方式:

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

# H1
## H2
### H3

H1

H2

H3

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

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

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

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

引用:

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

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

里面再来个引用

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

如果要语法高亮就在```后面加小写语言名,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)

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

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

跳转指定位置

列表(无序- 有序 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

目录生成就用js实现了,MarkDown的方式太累

博客园上传js文件,然后引用即可

$(function () {
    // 生成目录索引列表
    var mainContent = $('#cnblogs_post_body');
    var h2_list = $('#cnblogs_post_body h2');//如果你的章节标题不是h2,只需要将这里的h2换掉即可

    if (mainContent.length < 1)
        return;

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

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

            var li2_content = '';
            if (li3_content.length > 0)
                li2_content = '<li><a href="#_label' + i + '">' + $(h2_list[i]).text() + '</a><ul>' + li3_content + '</ul></li>';
            else
                li2_content = '<li><a href="#_label' + i + '">' + $(h2_list[i]).text() + '</a></li>';
            content += li2_content;
        }
        content += '</ul>';
        content += '</div><p>&nbsp;</p>';
        content += '<p style="font-size:18px"><b>正文</b></p>';
        if ($('#cnblogs_post_body').length != 0) {
            $($('#cnblogs_post_body')[0]).prepend(content);
        }
    }
    var allinfo = '<p><strong>汇总系列:<a href="https://www.cnblogs.com/dotnetcrazy/p/9160514.html" target="_blank">https://www.cnblogs.com/dotnetcrazy/p/9160514.html</a></strong></p>';
    $(mainContent[0]).prepend(allinfo);
});

更多语法请参考

https://daringfireball.net/projects/markdown/syntax

原文地址:https://www.cnblogs.com/dotnetcrazy/p/9180295.html

时间: 2024-10-13 03:43:47

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

markdown基础

markdown 基础 介绍 Markdown是一种可以使用普通文本编辑器编写的标记语言,通过简单的标记语法,它可以使普通文本内容具有一定的格式. 说的简单一点,markdown其实就是一种简单的文本,与普通的文本文件 (txt文件)不同的是,支持一些特殊的符号,通过特殊的符号来表示不同的语义,并且给予不同的样式.同时普通的文本文件后缀是.txt,而markdown文件的后缀是.md. 宗旨和特点 markdown 实现的宗旨是[易读易写].方便书写和阅读,通过特殊的符号实现一些基础的样式,而不

MarkDown:基础知识

MarkDown:基础知识 段落.标题.区块代码 斜体和粗体 列表 超链接 图片 代码 获取Markdown格式语法的要点 这页提供了 markdown 简单的概述给想使用的人,语法说明 页提供了完整详细的文件,说明每项功能,但是Markdown其实很简单就可以上手,这页文件提供了一些范例,并且每个范例都有提供输出的HTML结果. 其实直接试试看也是一个很不错的方法,Dingus是一个网页应用程序,让你可以把你的Markdown文件转成XHTML. Note: 这份文件本身也是用markdown

MarkDown基础语法大全

一.MarkDown是什么? Markdown是一种轻量级的「标记语言」,创始人为约翰·格鲁伯,用简洁的语法代替排版,目前被越来越多的知识工作者.写作爱好者.程序员或研究员广泛使用.其常用的标记符号不超过十个,相对于更为复杂的 HTML 标记语言来说,Markdown 十分的轻量,学习成本也不需要太多,且一旦熟悉这种语法规则,会有沉浸式编辑的效果.Markdown的语法简洁明了.学习容易,而且功能比纯文本更强,因此有很多人用它写博客,Markdown文件后缀为.md. 二.MarkDown标记语

最完整的Markdown基础教程

最完整的Markdown基础教程 最完整的Markdown基础教程 最完整的Markdown基础教程 原文地址:https://www.cnblogs.com/fanlinglong/p/12298439.html

【0002(基础)】Skyline二次开发入门经典系列教程&mdash;&mdash;目录

这段时间由于个人事务太多,以至于没有按照时间更新系列教程,本人将尽快补上所欠章节,在此说声抱歉!   这一章在我心目中占有很重要的地位,因为我想通过这一章的内容来确定整个系列的大致走向.然而在整理的过程中,发现现实远比想象要复杂得多:首先想尽可能介绍较多的知识点,其次又要考虑学习的简易程度,再次又要确定顺当的知识体系流程-- 由于暂时的考虑无论如何也是不可能完备的,因此为了不影响后面教程的编写,暂定把这一章作为一个[流动性质]的可变章节,在编写每一章时,动态根据实际情况修改(添加.移动.修改)系

java基础知识回顾之javaIO类--File类应用:获取指定目录下面的指定扩展名的文件,将文件的绝对路径写入到目的文件当中

/** * File文件综合应用 * 需求:获取指定目录下面,指定扩展名的文件,将文件的绝对路径写到文本文件当中. *  * 思路:1.需要深度遍历.--递归 * 2.遍历的过程中过滤指定扩展名的文件--过滤器FileNameFilter,将文件存入容器中 * 3.将容器中的内容遍历,写入到指定文件中 * */ 代码:  FilenameFilter 过滤器: package com.lp.ecjtu.File.filter; import java.io.File; import java.i

关于ansible基础入门和功能实现教程的更新页面

最近发现MDT推出去的系统的有不同问题,其问题就不说了,主要是策略权限被域继承了.比如我们手动安装的很多东东都是未配置壮态,推的就默认为安全壮态了,今天细找了一下,原来把这个关了就可以了. 关于ansible基础入门和功能实现教程的更新页面

JS-DOM:基础实操---以“对联”方式固定在页面

主要见于:天猫主页右侧的固定栏.京东主页右侧固定栏 方法一: CSS部分: <style type="text/css">body{    height: 3000px;}#div1{    width: 50px;    height: 150px;    background-color: #ccc;    position: absolute;    right: 0;    /*top: 50%;*/    /*margin-top: -75px;*/}</s

Xamarin.FormsShell基础教程(7)Shell项目关于页面的介绍

Xamarin.FormsShell基础教程(7)Shell项目关于页面的介绍 轻拍标签栏中的About标签,进入关于页面,如图1.8和图1.9所示.它是对应用程序介绍的页面. 该页面源自Views文件夹中的AboutPage.xaml和AboutPage.xaml.cs文件,而数据是通过绑定ViewModels文件中的AboutViewModel.cs类实现的. 轻拍Learn more按钮,会打开内置浏览器,并显示微软官网,如图1.10和图1.11所示. 原文地址:https://www.c