听说Markdown和学习笔记更配哦(To be continued)


目录

  • 背景
  • 标记语言MarkDown
  • 利用MarkDown生成目录索引
  • 总结

注:这个目录有点问题,正在找原因。。。


背景


前天作为一名未来的ThoughtWorker参加了ThoughtWorks的大讲堂,了解了许多关于日后所要工作的公司的文化、技术以及价值观。怎么说呢,感觉好像突然明白了“路漫漫其修远兮 吾将上下而求索”的感觉。公司文化中的处处都能让人感受到对于技术应用的自由、对于新鲜事物的渴望以及对于社会公正的使命感。而我,作为一个新人而言,目前能做的,也就是从简单开始,一步一步学习,一点一点积累,向着一个合格的ThoughtWorker成长。
大讲堂的最后,小buddy见面会上,我见到自己的专属buddy小日子先生ray,一个感觉挺暖的哥们。也就是从他这里,我第一次了解到Markdown标记语言,听说了Markdown对于写博客、写论文都有所帮助后,我立刻决定将学习它作为我的第一个学习任务。下面,就要进入正题啦。


标记语言MarkDown


在我看来,MarkDown就是一种为了方便用户在博客、评论等网络书写区里快速排板而产生的文本标记语言。它将一些特殊的符号和一些规则与HTML中的标签相对应,这样经过MarkDown编辑的文本在浏览器上显示出来的时候,就不单单是简单的text文本,而是将文本放入对应的HTML区块元素中,以便实现一些作者想要的效果,再通过浏览器显示出来。
关于Markdown常用语法,我的同期TW安洋写的Markdown学习笔记里总结得很是图文并茂,易于入门。
但我在学习过程中,发现MarkDown中没有可以生成目录索引的功能,这个让人很是郁闷。因此,接下来我要尝试一下如何能够利用MarkDown生成目录索引。


利用Markdown生成目录索引


MarkDown生成目录时,主要有两种方式,一种是需要其他扩展包的方式,具体方法见MarkDown生成目录索引,因为这种方式需要安装一些其他插件拓展MarkDown功能,而我目前还是刚入门,所以没有选择这种方式。而采用了另一种方法MarkDown+HTML混编(这种方法在上貌似有BUG)。具体如下:
将要生成目录的标题部分利用HTML标签包裹,如图:

要生成目录的标题——图1

注意,这里的id属性一定要有,之后的跳转链接会用到。
目录部分利用 列表+链接的格式实现 页内跳转,如下图所示:

听说Markdown和学习笔记更配哦(To be continued)_第1张图片
目录MarkDown形式——图2

注意,这里采用链接格式的括号里写入 #+对应标题的id(取代原本填写跳转地址)。
最终生成的目录如下:

听说Markdown和学习笔记更配哦(To be continued)_第2张图片
最终目录——图3

注:在文章发布后,并没有实现页内跳转的预期效果,正在寻找原因。。。


原因分析(后续更新)##

通过比较在文本编辑时自己所书写的MarkDown文件和发布后的文章在浏览器控制台检查HTML代码,发现发布后标题元素的id属性消失。

MarkDown定义标题时添加了ID属性——图4
通过浏览器检查HTML文件——图5

由此可以得知无法完成页内跳转的原因是由于锚点丢失造成的。
在名为Typora的MarkDown编辑器中采用同样的方法生成本文目录,截图如下:

听说Markdown和学习笔记更配哦(To be continued)_第3张图片
采用Typora生成的HTML文件在浏览器中打开——图6
听说Markdown和学习笔记更配哦(To be continued)_第4张图片
采用Typora生成的HTML文件在浏览器中打开——图7

查看标题的HTML节点属性:

采用Typora生成的HTML文件

可见其id属性未丢失,并且生成的目录可以使用,实现页内跳转功能。

由此得知造成锚点丢失的原因,为的MarkDown编辑器不完全支持这种混编形式。因此之后要想在中生成目录,只能使用第一种安装拓展包的方式实现。等新系统装好后,再去尝试一下这种扩展包的方法。


参考资料:
Markdown学习笔记
MarkDown页内跳转实现
MarkDown技巧:两种方式实现页内跳转
MarkDown生成目录索引


总结


这两天只是对MarkDown做了浅显的学习,但是仅仅是这样,就遇到了上述的问题,那么如果要往深入学,应该还会有更多的问题需要我去想办法解决。
另外,关于自己的学习方式,其实以前一直没有写过东西去记录自己的学习历程,但是这次因为参与了TW大讲堂,有了这么一个机会,也做了这样一次尝试,感觉还不错。希望之后能坚持下去,待到三五年后,也算有个回首往事的印记吧。

你可能感兴趣的:(听说Markdown和学习笔记更配哦(To be continued))