整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
学习时，都知道好记性不如烂笔头。但是在这个计算机信息时代，即使我们在只能纸质记录重要的信息后，也建议即时整理成电子记录存储在电脑中。主要一下几大好处：
故此，我们需要借助计算机这样的强大工具，记录我们所想所得。但是很多人并非计算机专业，对只需要记笔记的小伙伴来说，而学习word排版，甚至html的编写。犹如我只要骑自行车解决的问题，却要我去学开坦克甚至飞机，成本太高。
这个世界不缺牛人来解决我们的痛点，一位外国牛人就为此创造一种轻量级标记语言Markdown ，它允许人们使用易读易写的纯文本格式编写文档，然后转换成有效的 XHTML（或者HTML）文档。
如果你愿意将你的笔记或者文章，制作成在线个人博客站点发布到互联网上(免费利用github.io)，我也将一步步教你如何搭建。这里还需要nodejs、github等基础知识，其实也不难，下面我提供。
涉及知识有点多，内容偏长，收藏查看更方便。每个小节下都有“扩展”内容，也很重要。
1、简介
Markdown是一种轻量级的标记语言，它允许人们使用易读易写的纯文本格式编写文档，借助可实现快速排版且转换成格式丰富的HTML页面。目前被越来越多的写作爱好者及工作者使用。其语法十分简单，常用标记符号少，学习时间少，一旦掌握这种标记语言，将极大提高效率。但是若需要复杂排版如左右对齐缩进等，还是选择word等专业软件。
Markdown用简洁的语法代替排版，而不像常用文字处理软件Word或Pages等进行排版、字体、插入等设置。标记语言可以通过键盘即实现字体大小、插入表格，图片，超链接，脚注等。
Markdown的优点
最大好处是：快速掌握。
简单，适合所有人群，方便打开，不至于出现低版本word打不开高版本word的文档。
避免软件不同，如对方是wps，看到的word文档效果和你不一样。
方便快速排版，节省时间。
轻松的导出为HTML、PDF格式。
纯文本内容，兼容所有的文本编辑器与文字处理软件。
支持Markdown语法的编辑器有很多，部分网站也支持。
2、编写工具
这里我推荐使用typora，因为它可以所以见即所得，不会像他编辑工具一样，左边编辑，右边预览。
3、语法
Markdown 教程 | 菜鸟教程 《了不起的Markdown》‘
4、个人体会
markdown让我们程序员，在记录知识时省却了排版所浪费的时间，而且支持代码块，流程图等。在word上程序代码不支持高亮，而且排版格式不适宜代码显示等。而markdown会让你心情愉悦，只需在编辑内容上用心即可。
5、Typora 标题自动编号
Typora其实是将markdown转换成html展示给我们看的，而且默认层级显示是没有序号，只有字体大小。所以我们需要通过css让其显示序号，让笔记更有层次感。
在主题文件夹下开创建base.user.css文件，复制粘贴一下css样式代码：
/** initialize css counter */
#write {
counter-reset: h1
}
h1 {
counter-reset: h2
}
h2 {
counter-reset: h3
}
h3 {
counter-reset: h4
}
h4 {
counter-reset: h5
}
h5 {
counter-reset: h6
}
/** put counter result into headings */
#write h1:before {
counter-increment: h1;
content: counter(h1) ". "
}
#write h2:before {
counter-increment: h2;
content: counter(h1) "." counter(h2) ". "
}
#write h3:before,
h3.md-focus.md-heading:before /** override the default style for focused headings */ {
counter-increment: h3;
content: counter(h1) "." counter(h2) "." counter(h3) ". "
}
#write h4:before,
h4.md-focus.md-heading:before {
counter-increment: h4;
content: counter(h1) "." counter(h2) "." counter(h3) "." counter(h4) ". "
}
#write h5:before,
h5.md-focus.md-heading:before {
counter-increment: h5;
content: counter(h1) "." counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) ". "
}
#write h6:before,
h6.md-focus.md-heading:before {
counter-increment: h6;
content: counter(h1) "." counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) "." counter(h6) ". "
}
/** override the default style for focused headings */
#write>h3.md-focus:before,
#write>h4.md-focus:before,
#write>h5.md-focus:before,
#write>h6.md-focus:before,
h3.md-focus:before,
h4.md-focus:before,
h5.md-focus:before,
h6.md-focus:before {
color: inherit;
border: inherit;
border-radius: inherit;
position: inherit;
left:initial;
float: none;
top:initial;
font-size: inherit;
padding-left: inherit;
padding-right: inherit;
vertical-align: inherit;
font-weight: inherit;
line-height: inherit;
}
/*左侧大纲目录序号*/
.sidebar-content {
counter-reset: h1
}
.outline-h1 {
counter-reset: h2
}
.outline-h2 {
counter-reset: h3
}
.outline-h3 {
counter-reset: h4
}
.outline-h4 {
counter-reset: h5
}
.outline-h5 {
counter-reset: h6
}
.outline-h1>.outline-item>.outline-label:before {
counter-increment: h1;
content: counter(h1) ". "
}
.outline-h2>.outline-item>.outline-label:before {
counter-increment: h2;
content: counter(h1) "." counter(h2) ". "
}
.outline-h3>.outline-item>.outline-label:before {
counter-increment: h3;
content: counter(h1) "." counter(h2) "." counter(h3) ". "
}
.outline-h4>.outline-item>.outline-label:before {
counter-increment: h4;
content: counter(h1) "." counter(h2) "." counter(h3) "." counter(h4) ". "
}
.outline-h5>.outline-item>.outline-label:before {
counter-increment: h5;
content: counter(h1) "." counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) ". "
}
.outline-h6>.outline-item>.outline-label:before {
counter-increment: h6;
content: counter(h1) "." counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) "." counter(h6) ". "
}
mark {
background: white;
color: red;
font-weight: bold;
border-bottom: 0px solid white;
padding: 0.0px;
margin: 0 0px;
}
::selection { background-color: Lime; color: red;}gitbook安装与使用（含常用插件和book.json配置详解）_gitbook json-CSDN博客
1、是什么？
在我认识 GitBook 之前，我已经在使用 Git 了，毋容置疑，Git 是目前世界上最先进的分布式版本控制系统。
我认为 Git 不仅是程序员管理代码的工具，它的分布式协作方式同样适用于很多场合，其中一个就是写作（这会是一个引起社会变革的伟大的工具！）。所以在我发现 GitBook 之前，实际上我已经无数次想象过它的使用场景了。
咋一看 GitBook 的名字，你可能会认为它是关于 Git 的一本书。而当你有所了解之后，你也许会认为它是一个使用 Git 构建电子书的工具。其实不然，GitBook 与 Git 的关系，就像雷锋塔和雷锋那样，没有一点关系！ 实际上，GitBook 是一个基于 Node.js 的命令行工具，支持 Markdown 和 AsciiDoc 两种语法格式，可以输出 HTML、PDF、eBook 等格式的电子书。所以我更喜欢把 GitBook 定义为文档格式转换工具。
所以，GitBook 不是 Markdown 编辑工具，也不是 Git 版本管理工具。市面上我们可以找到很多 Markdown 编辑器，比如 Typora、MacDown、Bear、MarkdownPad、MarkdownX、JetBrains’s IDE（需要安装插件）、Atom、简书、CSDN 以及 GitBook 自家的 GitBook Editor 等等。
2、安装 gitbook
GitBook 是一个基于 Node.js 的命令行工具，下载安装 Node.js，安装完成之后，你可以使用下面的命令来检验是否安装成功。
注意Node.js 对Gitbook存在兼容问题，截止2024年01月15日，LST版本为20.11.0，最新版21.5.0。建议用LTS版本。这是我个人以前发布的NodeJS开发 · 学习笔记 (w-life.cn)如何windows下如何安装搭建nodejs环境。
在https://nodejs.org/en/download/releases/中，可以查看所有Node.js版本。
$ node -v
#我本地的版本
v16.15.1确认安装完node.js后再执行一下命令
npm install gitbook-cli -g
#或者（yarn类似于npm安装方式）
yarn global add gitbook-cli3、验证安装
gitbook -V注意：若输入上面命令后，提示Installing GitBook，时间较长，请耐心等待。
4、初使化目录
gitbook init会发现目录下面多了2个文件，README.md和SUMMARY.md
README.md 和 SUMMARY.md 是两个必须文件
README.md 是对书籍的简单介绍
SUMMARY.md 是书籍的目录结构
其中路径就是相对路径，只支持两级目录
5、生成
#生成在当前目录的默认文件夹 _book里面
gitbook build
#生成在当前目录的默认文件夹 指定的out 里面
gitbook build ./out
#当前除文件夹md外，生成到out文件夹中
gitbook build ./md ./out 6、本地预览
#注意server没有r。默认端口4000
gitbook serve --port 8088http://localhost:8088
7、配置文件（不是必需的）
在目录下创建book.json文件，json对象在使用过成中，不允许注释，请复制粘贴后删除注释部分。
{
"title": "前端规范",
"description": "前端规范 简介",
"language": "zh-hans",
"plugins": [
"-lunr",
"-search",
"code", //代码行号插件和复制
"search-plus", //支持中文搜索 上面 search 是默认的 “-” 是去掉的意思
"splitter", // 这个侧边可以拉伸
"tbfed-pagefooter", //这个是底部加 信息 下面可以看到具体的配置
"expandable-chapters-small"//使左侧的章节目录可以折叠
"page-treeview", //页面头部目录
"page-toc-button", //右侧悬浮目录导航
"icp" //备案信息
],
"pluginsConfig": {
"theme-default": {
"showLevel": true
},
"tbfed-pagefooter": {
"copyright":"Copyright ? xxxxx",
"modify_label": "该文件修订时间：",
"modify_format": "YYYY-MM-DD HH:mm:ss"
},
"page-treeview": {
"copyright": "Copyright ? aleen42",
"minHeaderCount": "2",
"minHeaderDeep": "2"
},
"page-toc-button": {
"maxTocDepth": 2,
"minTocSize": 2
},
"icp": {
"label": "",
"number": "浙ICP备18042346号",
"link": "http://beian.miit.gov.cn/",
"style": {
"color": "#f72b07"
}
},
"links": {
"gitbook": false,
"sharing": {
"google": false,
"facebook": false,
"twitter": false,
"all": false
}
}
}上面配置好后，启动服务会报错，这样需要我们安装gitbook插件
8、gitbook插件
gitbook仓库（https://www.npmjs.com/）（使用gitbook-plugin-{插件名称}关键字搜索）
常用插件（https://www.jianshu.com/p/427b8bb066e6）
#插件只要在上一小节描述的json中配置好后，再执行该命令，就会自动安装（速度太慢，耐心等待）
gitbook install#推荐使用下面命令一个个安装，因为会使用nodejs镜像安装，虽比上面安装复杂，但是安装速度快
npm install gitbook-plugin-{插件名称}【提醒】因为gitbook项目不是标准的nodejs项目，所以安装会出现如下图警告，请不要理会。
安装的插件都在当前目录下的node_modules文件夹下
#所以可以插件目录下按需删除，对插件卸载。也可将整个文件夹删除卸载。
rmdir /s/q node_modules\8、卸载GitBook
rmdir /s/q C:\Users\{User}\.gitbook #找到并删除此文件夹删除后执行命令
npm uninstall -g gitbook
npm uninstall -g gitbook-cli
# 清除npm缓存
npm cache clean --force9、常用命令
gitbook init //初始化目录文件
gitbook help //列出gitbook所有的命令
gitbook --help //输出gitbook-cli的帮助信息
gitbook build //生成静态网页
gitbook serve //生成静态网页并运行服务器
gitbook build --gitbook=2.0.1 //生成时指定gitbook的版本, 本地没有会先下载
gitbook ls //列出本地所有的gitbook版本
gitbook ls-remote //列出远程可用的gitbook版本
gitbook fetch 标签/版本号 //安装对应的gitbook版本
gitbook update //更新到gitbook的最新版本
gitbook uninstall 2.0.1 //卸载对应的gitbook版本
gitbook build --log=debug //指定log的级别
gitbook builid --debug //输出错误信息10、关于目录插件
因为我们标题序号都是通过css自动生成，所以我们gitbook构建出的html，标题及目录也要用css生成编号。故我们要在项目目录下创建styles/website.css文件夹及文件，这样构建后，html会自动引用该样式。
/*隐藏page-treeview目录的版权信息*/
.treeview__container-title{
display: none;
}
/*给头部目录增加编号*/
.markdown-section li {counter-increment:a 1;}
.markdown-section li a:before{content:counter(a)". ";}
.markdown-section li li {counter-increment:b 1;}
.markdown-section li li a:before{content:counter(a)"."counter(b)". ";}
.markdown-section li li li {counter-increment:c 1;}
.markdown-section li li li a:before{content:counter(a)"."counter(b)"."counter(c)". ";}
.markdown-section li li li li {counter-increment:d 1;}
.markdown-section li li li li a:before{content:counter(a)"."counter(b)"."counter(c)"."counter(d)". ";}
/*给悬浮目录增加编号*/
.page-toc-menu li {counter-increment:toca 1;}
.page-toc-menu li a:before{content:counter(toca)". ";}
.page-toc-menu ul ul li {counter-increment:tocb 1;}
.page-toc-menu ul ul li a:before{content:counter(toca)"."counter(tocb)". ";}
/*给标题增加编号*/
.markdown-section { counter-reset: h1}
h1 {counter-reset: h2}
h2 {counter-reset: h3}
h3 {counter-reset: h4}
h4 {counter-reset: h5}
h5 {counter-reset: h6}
.markdown-section h1:before {counter-increment: h1; content: counter(h1) ". ";}
.markdown-section h2:before {counter-increment: h2; content: counter(h1) "." counter(h2) ". "}
.markdown-section h3:before {counter-increment: h3;content: counter(h1) "." counter(h2) "." counter(h3) ". "}
.markdown-section h4:before {counter-increment: h4; content: counter(h1) "." counter(h2) "." counter(h3) "." counter(h4) ". "}
.markdown-section h5:before {counter-increment: h5; content: counter(h1) "." counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) ". "}
.markdown-section h6:before {counter-increment: h6; content: counter(h1) "." counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) "." counter(h6) ". "}
p {text-indent:2em}
mark {
background: white;
color: red;
font-weight: bold;
border-bottom: 0px solid white;
padding: 0.0px;
margin: 0 0px;
}
::selection { background-color: Lime; color: red;}11、问题
a、问题（warn"options"）
该问题经过排除法和网络上类似问题描述，应该是所使用的插件版本自身某些语法规则不是最新的导致。
b、问题（第一个h1生成不了页面目录）
需要首行空一行
c、问题（gitbook部署后相对路径资源文件404问题）
这种资源文件提示404错误请忽略，这是因为gitbook布局不是用iframe，所以资源文件会在页面加载完后，js会再处理相对路径的资源文件。
d、构建或启动时报错
如果出现类似这样的错误，就删除_book文件夹，重新执行命令即可。
c、gitbook install 报错
12、扩展
gitbook在样式美观和左侧文章目录菜单层级等方面，都很简陋。现在vue大行其道，其官方团队基于vue开发出了一个 Vue 驱动的静态网站生成器，它就是VuePress（https://vuepress.vuejs.org/zh/），它允许开发者自定义，自己需要的主题样式。这里我发现了我比较喜欢vuepress-theme-vdoing (xiaolongsu.cn)（https://vue-doc.xiaolongsu.cn/）主题样式，大家可以学习一下。
下图是主题官网提供的一个案例，真的很漂亮。
下面是ChatGPT给出的详细说明。我简单总结一下就是，将发布好的静态网站资源上传到仓库，然后在指定的生成的网址就可以在线访问。
GitHub Pages 是 GitHub 提供的一项服务，它允许用户在 GitHub 上托管和发布静态网站。GitHub Pages 可以用于展示个人、组织或项目的静态网页、文档、博客等内容。以下是关于 GitHub Pages 的一些关键信息：
要使用 GitHub Pages，您可以在 GitHub 仓库的设置中找到相应的选项，并配置您的仓库和分支以启用 GitHub Pages 服务。可以在仓库的 Settings 页面的 "GitHub Pages" 部分找到有关配置和访问您网站的信息。
这里需要git及github相关知识，在哔哩哔哩等视频网站有很多这方面的视频讲解。以下内容我都建立大家已经拥有了这块知识基础上。
如果你自己有域名的话，可将自己的域名指向这个github pages。以我拥有腾讯云名下的域名（w-life.cn）为例讲解。我定义一个“bk.w-life.cn”进行指向。
很多人会将自己的markdown知识笔记提交到github仓库进行存储，这样可以随时随地进行查看或修改自己的笔记。如果这样的话我们可以借助github中的GitHub Actions 文档 - GitHub 文档持续集成服务来实现，将我们的markdown笔记push到github后，同时github会帮我们自动生成发布静态资源。
其实这个很简单，就是在本地仓库建立好.github/workflows/page.yml，写好相应的脚本配置，将这个文件也push到github就可以了。网上这方面的脚本有很多，官方文档我也提供。如果大家还不清楚，欢迎留言或私信，我再写一篇这个主题的文章。
笔记都对自己的理解总结，知识分享是对自己理解的梳理，也是成长的见证，也是希望广大小伙伴的指正。
JavaScript程序使用Unicode字符集编写。Unicode字符集中每个字符
使用两个字节来表示，这意味着用户可以使用中文来命名JavaScript中的变量。
实例：试着运行下程序，可以看到程序运行正常。
<!DOCTYPE html>
<html lang="CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
var 人名="老王";
function 睡觉(谁)
{
alert(谁+" 快睡了!宝宝!");
}
睡觉(人名);
</script>
</body>
</html>根据ECMAscript标准只允许Unicode字符出现注释和引号中的字符串中，其他代码必须用
ASCII字符集。所以考虑到兼容性，不建议使用汉字命名变量和函数名。
因为JavaScript代码嵌入在网中一般严格考虑网页字符编码与JavaScript编码保持一致，以避免
出现乱码。
ypora导出的PDF目录标题自动加编号
在Typora主题文件夹增加如下文件后，标题便自动加上了编号：
https://gitcode.net/as604049322/blog_data/-/blob/master/base.user.css
例如：
但是导出的PDF中，目录却没有编号：
这是我使用Python处理该文件，使其具有编号，完整代码如下：
# 博客地址：https://blog.csdn.net/as604049322
__author__='小小明-代码实体'
__date__='2023/8/31'
from PyPDF2 import PdfReader, PdfWriter
def get_pdf_Bookmark(filename):
"作者CSDN：https://blog.csdn.net/as604049322"
if isinstance(filename, str):
pdf_reader=PdfReader(filename)
else:
pdf_reader=filename
pagecount=len(pdf_reader.pages)
# 用保存每个标题id所对应的页码
idnum2pagenum={}
for i in range(pagecount):
page=pdf_reader.pages[i]
idnum2pagenum[page.indirect_ref.idnum]=i
# 保存每个标题对应的标签数据，包括层级，标题和页码索引（页码-1）
bookmark=[]
def get_pdf_Bookmark_inter(outlines, tab=0):
for outline in outlines:
if isinstance(outline, list):
get_pdf_Bookmark_inter(outline, tab + 1)
else:
bookmark.append(
(tab, outline['/Title'], idnum2pagenum[outline.page.idnum]))
get_pdf_Bookmark_inter(pdf_reader.outline)
return bookmark
def pdf_write_bookmark(bookmark, pdf_file, compress=True):
pdf_reader=PdfReader(pdf_file)
num_pages=len(pdf_reader.pages)
pdf_writer=PdfWriter()
for page in pdf_reader.pages:
if compress:
page.compress_content_streams()
pdf_writer.add_page(page)
# pdf_reader.
last_cache=[None] * (max(bookmark, key=lambda x: x[0])[0] + 1)
for tab, title, pagenum in bookmark:
if pagenum >=num_pages:
continue
parent=last_cache[tab - 1] if tab > 0 else None
indirect_id=pdf_writer.add_outline_item(title, pagenum, parent=parent)
last_cache[tab]=indirect_id
pdf_writer.page_mode="/UseOutlines"
with open(pdf_file, "wb") as out:
pdf_writer.write(out)
print("已成功将书签写入到", pdf_file)
if __name__=='__main__':
file=r"C:\Users\sj\Desktop\集团管理层培训.pdf"
bookmark=get_pdf_Bookmark(file)
num_cache=[0] * 7
last_tab=0
new_bookmark=[]
for tab, title, pagenum in bookmark:
if tab > last_tab:
num_cache[tab]=1
else:
num_cache[tab] +=1
new_title=title
if not title[0].isdigit():
new_title=".".join(map(str, num_cache[:tab + 1])) + " " + title
# print(tab, new_title, pagenum)
new_bookmark.append((tab, new_title, pagenum))
last_tab=tab
pdf_write_bookmark(new_bookmark, file)
处理后的PDF目录就有编号了：
小伙伴们，快快用实践一下吧！如果在学习过程中，有遇到任何问题，欢迎加我好友，我拉你进Python学习交流群共同探讨学习。
*请认真填写需求信息，我们会在24小时内与您取得联系。
