vuepress 根据markdown文件生成侧边栏

2024-08-02

1小时搞定vuepress快速制作vue文档/博客+免费部署预览

先来一下演示效果.和vue的官方文档几乎是一致的,页面内容都可自定义. 此教程部署后的效果预览. 在你跟着教程搭建好项目之后,你会收获: 快速搭建一个文档/博客,后期只需要修改markdown内容和导航参数,即可一键打包生成页面. 页面具有非常好的加载性能和搜索引擎优化(SEO),其他的页面则会只在用户浏览到的时候才按需加载. 自动生成全局搜索.记录上次修改时间等功能. 可嵌入vue组件或跳转至其他页面,可定制自己的样式模板便于扩展. 一键免费部署到 github.pages,无需服务器即可拥有

为Markdown文件生成目录

缘由思路效果代码实现缘由 Markdown源生文件源生不支持目录,目前比较主流的生成目录的方式(各式插件),都是转化为HTML文件.虽然HTML文件可以生成眼花缭乱的目录,但是修改起来又没有Markdown方面.以上,所以我决定生成一种既有目录,并且修改起来还比较方面的Markdown文件. 思路 Markdown是兼容HTML语法的,那么通过抽取Markdown中的标题,生成HTML标签,并且链接到各标题,一份简易的目录即可完成. 效果左侧为Markdown文件,右侧为Markdow

为 github markdown 文件生成目录(toc)

业务需要在编写 github 项目时,有时候会编写各种 README.md 等 markdown 文件,但是 github 默认是没有目录的. 于是就自己写了一个小工具. markdown-toc markdown-toc 可以用来生成 markdown 页面的目录,便于 github 页面展现. Features Github Markdown 文件一键生成目录支持 fluent 优雅的写法支持多次生成支持重复标题的生成支持特殊字符的过滤支持指定不同的文件编码支持文件夹的文件批量

解析Markdown文件生成React组件文档

前言最近做的项目使用了微前端框架single-spa. 对于这类微前端框架而言,通常有个utility应用,也就是公共应用,里面是各个子应用之间可以共用的一些公共组件或者方法. 对于一个团队而言,项目中公共组件和方法的使用难点不在于封装不在于技术,很多时候在于团队内部成员是否都能了解这些组件,以避免重复开发,从而提升团队效率. 如果是团队比较小,人员比较稳定的项目组可能还好点,对于团队比较大,人员流动较快的团队,这些通用组件和方法往往就被人遗忘在角落,很难再得到有效利用. 因为我所在的项目还在

markdown自动生成侧边栏TOC /目录

http://blog.csdn.net/haleypku/article/details/51226704 此文可以只了解一下概念: http://i5ting.github.io/i5ting_ztree_toc/ 此文说有引用的文件: <\jQuery精品教程视频\jQuery精品教程资料\19-jQuery第一天\01-教学资料\笔记\preview\template.html> <html> <head> <meta http-equiv="

Markdown自动生成目录

Markdown自动生成目录使用npm语法生成 1.安装npm 2.安装doctoc插件 3.执行生成参考 Markdown自动生成目录使用npm语法生成 1.安装npm 我的系统是deepin,其他系统的可自行google sudo apt install node 2.安装doctoc插件 npm i doctoc -g //install 简写 i 3.执行生成切换到md的目录下面,执行下面的命令就能生成 $ doctoc markdown自动生成目录.md DocToccing

vscode 编写Markdown文件

vscode使用Markdown文档编写首先安装vscode工具,具体的使用可以参考之前的博文:<Visual Studio Code教程:基础使用和自定义设置> VScode已经默认集成markdown文档编辑插件.可以新建一个.md文件Visual Studio Code 原生就支持高亮Markdown的语法,想要一边编辑一遍预览,有两种方法:1.Ctrl + Shift + P 调出主命令框,输入 Markdown,应该会匹配到几项 Markdown相关命令 2.先按Ctrl +

[python]自动化将markdown文件转成html文件

*:first-child { margin-top: 0 !important; } body>*:last-child { margin-bottom: 0 !important; } /* BLOCKS =============================================================================*/ p, blockquote, ul, ol, dl, table, pre { margin: 15px 0; } /* HEAD

[原创]使用Pandoc实现Markdown文件转PDF文件

Markdown写法简单明快,我十分喜欢,以至于我最近都想使用Markdown快速的进行测试说明书的写作,但是考虑到这文档是要进行交接的,一个.md的文件在内部传输还是有不便,于是就想到了能不能把Markdown转为PDF文件作为通用文件. 然后搜索后看到了这样的一篇文章如何把 Markdown 文件转化为 PDF,文中提到了很多方法,有使用.md->.html->.pdf的,也有.md->.word->.pdf,也有.md->.tex->.pdf的.最终考虑到之前曾经

自制 Python小工具将markdown文件转换成Html文件

今天看到了一个Python库,名为markdown.瞬间就给了我一个灵感,那就是制作一个将markdown文件转换成html文件的小工具. 我的实验环境操作系统: Windows 7 64位旗舰版 Python版本: 2.7.11 IDE: PyCharm pro 2016.1 所需依赖: optparser markdown 转换核心转换的过程很简单,只需要使用markdown库即可,具体使用方法如下: from markdown import markdown def parse(md

利用Pandoc将markdown文件转化为pdf

利用Pandoc将markdown文件转化为pdf 准备工作安装pandoc 安装MiKTeX 将markdown文件转换为pdf 准备工作安装pandoc Windows下安装pandoc很容易,直接从pandoc官网上下载最新安装包安装即可.Linux下的安装可以参考阳志平的博文1. 安装MiKTeX pandoc被称为格式转换的瑞士军刀2.执行程序文件只有20M左右大小,但是能够在几十种文件格式之间自如的转换,那当然是得依赖各种格式文件所需要库.转换为pdf就要用到MiKTeX,Win

使用VS Code编写Markdown文件

VS Code默认支持Markdown文件文件格式,这里介绍两个比较实用的功能,后续有新发现,可以持续更新. 实时预览顾名思义,实时编辑,实时预览解析效果. 在VS Code扩展中搜索"Markdown Preview Enhanced",安装完成后重载即可. 复制粘贴图片这个要好好介绍一下,因为实在是太方便了.之前写个文档,都是把截图先截下来存好,然后引用路径,写作效率大大降低. CSDN中就可以直接截图,复制粘贴,就传到CSDN服务器生成了图片url,很方便,所以想在CSDN写

Markdown 文件如何实现 chm 文件打包

需要借助2个工具,下面的链接都有对应的网址 LME和 hhw, 有不清楚的可以下面评论,7*24小时在线解答问题,也可以加博主微信首先借助 Markdown To CHM(LME) 工具将Markdown文件,编译成chm工程文件其实就是HTML文件,LME工具栏提供编译功能. 然后借助 HTML Help Workshop 工具编译成chm文件. 踩坑经验: 1. chm编译是会将文件夹变成一个目录,目录默认需要链接到与文件夹名字相同的一个地址,否则编译工程文件时会有警告弹框:如果文件夹中的

vue展示md文件，前端读取展示markdown文件

方案1:每次都需要重新打包,每次修改都需要build 直接使用require + v-html: 核心代码如下: 1. 首先需要添加MD文件的loader就是 markdown-loader npm install --sava markdown-loader 2. 然后require加载对应的资源,也可以通过ajax获取资源对象 this.htmlMD = require('./xxx.md'); 或 axios.get(url).then((response) => { this.htmlM

本地Markdown文件上传到博客

本地Markdown文件上传到博客参考:https://www.cnblogs.com/ccylhw/p/13954153.html 1.Typora 最漂亮的写作APPhttps://www.typora.io/ 2.Typroa到博客园第一步:下载dotnet-sdk并安装 dotnet下载地址第二步:通过dotnet --info确认安装完成,版本为3.1.9 第三步:输入dotnet tool install -g dotnet-cnblog进行安装第四步:dotnet-cnbl

使用vscode编辑markdown文件（可粘贴截图）

使用markdown粘贴截图时,操作步骤比较多: 1)截取图片: 2)将图片存在特定位置: 3)记住图片路径,在markdown文件中编写代码: 4)预览效果: 而word之类的文档编辑器,只需要截图后,执行粘贴操作即可,特别方便. 希望在编写markdown时也支持这个操作,查阅资料后发现,可以借助VS Code的Paste Image插件实现: 截图后,执行 Ctrl + Alt + V 操作,即可完成图片存盘.生成markdown嵌入图片的代码.效果预览三个步骤. 这里记录下,以便后续查阅

Android first---xml文件生成与解析

一.使用append进行xml生成 Message类属性:private String body; private String date; private String address; private String type; public class MainActivity extends Activity { List<Message> smsList; @Override protected void onCreate(Bundle

ActiveX: 如何用.inf和.ocx文件生成cab文件

ssl证书生成：cer&jks文件生成摘录

一.生成.jks文件 1.keystore的生成: 分阶段生成: keytool -genkey -alias yushan(别名) -keypass yushan(别名密码) -keyalg RSA(算法) -keysize 1024(密钥长度) -validity 365(有效期,天单位) -keystore e:/yushan.keystore(指定生成证书的位置和证书名称) -storepass 123456(获取keystore信息的密码):回车输入相关信息即可: 一次

LINQ to XML 从逗号分隔值 (CSV) 文件生成 XML 文件

参考:http://msdn.microsoft.com/zh-cn/library/bb387090.aspx 本示例演示如何使用语言集成查询 (LINQ) 和 LINQ to XML 从逗号分隔值 (CSV) 文件生成 XML 文件. 下面的代码对字符串数组执行 LINQ 查询. 在 C# 版本中,该查询使用 let 子句将每个字符串分隔成字段数组. C# VB // Create the text file. string csvString = @"GREAL,Great Lake