首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何将代码突出显示添加到VuePress?

VuePress是一个基于Vue.js的静态网站生成器,它可以帮助我们快速构建文档网站。如果我们想要在VuePress中将代码突出显示,可以通过以下步骤实现:

  1. 在VuePress项目的根目录下,找到.vuepress文件夹(如果没有则手动创建)。
  2. .vuepress文件夹中创建一个名为styles的文件夹。
  3. styles文件夹中创建一个名为code.styl的文件。
  4. code.styl文件中添加以下样式代码:
代码语言:txt
复制
pre[class*="language-"] {
  padding: 1em;
  overflow: auto;
  background-color: #f5f5f5;
  border-radius: 4px;
}

code[class*="language-"],
pre[class*="language-"] {
  color: #333;
}

.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
  color: #999;
}

.token.punctuation {
  color: #ccc;
}

.namespace {
  opacity: .7;
}

.token.property,
.token.tag,
.token.boolean,
.token.number,
.token.constant,
.token.symbol,
.token.deleted {
  color: #905;
}

.token.selector,
.token.attr-name,
.token.string,
.token.char,
.token.builtin,
.token.inserted {
  color: #690;
}

.token.operator,
.token.entity,
.token.url,
.language-css .token.string,
.style .token.string {
  color: #9a6e3a;
  background: hsla(0, 0%, 100%, .5);
}

.token.atrule,
.token.attr-value,
.token.keyword {
  color: #07a;
}

.token.function,
.token.class-name {
  color: #dd4a68;
}

.token.regex,
.token.important,
.token.variable {
  color: #e90;
}

.token.important,
.token.bold {
  font-weight: bold;
}

.token.italic {
  font-style: italic;
}

.token.entity {
  cursor: help;
}

以上代码是一个基本的代码高亮样式,你可以根据自己的需求进行修改。

  1. 保存code.styl文件。

完成以上步骤后,重新启动VuePress项目,你将会看到代码块已经被突出显示了。

这是一个基本的将代码突出显示添加到VuePress的方法,你也可以根据需要使用其他代码高亮库或自定义样式来实现更多的定制化效果。

关于VuePress的更多信息和使用方法,你可以参考腾讯云的产品介绍页面:VuePress产品介绍

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

  • 使用VuePress 搭建个人博客

    安装 ❝前置条件:VuePress 需要 Node.js >= 8.6 ❞ 安装 vuepress VuePress 安装毕竟简单,可以使用以下命令直接安装: yarn add -D vuepress...首先在当前目录下创建 .vuepress 目录(所有 VuePress 相关的文件都放在此目录下),然后在 .vuepress 目录下创建 config.js 文件(也可以使用YAML (.vuepress...: false 来禁用默认的搜索框,或是通过 themeConfig.searchMaxSuggestions 来调整默认搜索框显示的搜索结果数量: module.exports = { themeConfig...使用 将ga 配置添加到配置文件 module.exports = { plugins: [ [ '@vuepress/google-analytics', {...REPO> # git push -f git@github.com:/.git master:gh-pages cd - ❝也以使用github ci 在每次提交代码的时候自动部署到

    1K20

    我问导师,Vue3有没有对应工具来生成漂亮的文档? 用 Vitepress

    Vitepress 被称为“ Vuepress的小弟弟”,它比同类产品具有一些优势。...建立在Vite而非Webpack上,因此启动时间,热重装等更快 使用Vue3来减少JS的有效负载 轻量级 Vitepress 能够实现这些目标的一个原因是,它比Vuepress 更具体,而 Vuepress...,我们只需要将对象添加到nav数组中,格式为{text:'ANCHOR-TEXT',link:'PATH'}: // .vitepress/config.js module.exports = {...比如,我们想让首页显示其标题,其他页面都显示我们刚刚制作的侧边栏。 我们要做的第一件事是创建将our-story侧边栏存储为变量。...代码块 在编写好的文档时,代码示例至关重要。 Vitepress 提供了一种快速添加代码块并指定正在使用的编程语言的方法。 ? ?

    1.6K20

    从零开始:VuePress2 + GitHub Pages 搭建你的第一个免费博客网站

    build": "vuepress build docs" } } 打开package.json文件,修改下scripts的内容: 步骤 5: 将默认的临时目录和缓存目录添加到 .gitignore...about-the-github_token-secret GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} 提交项目到 github 仓库 在命令行依次执行以下代码...blog.git 改成你自己的仓库地址 git remote add origin git@github.com:zhanyd/blog.git git push -u origin main 提交完代码之后...原来是 docs.yml 文件中的 pnpm 的版本和我本地的 pnpm 版本不一样: 我把docs.yml 文件中 pnpm 版本改成了 7.28.0,这样就和本地的 pnpm 版本一致了: 重新提交代码到...Pages侧边栏,Source 选择 Deploy from a branch,然后在 Branch 标签下选择 gh-pages 分支和 root 目录,点保存,就可以看到上面的博客地址了: 如果没有显示博客地址

    48011

    使用vuepress+github page搭建网络收藏夹

    使用vuepress+github page搭建收藏夹 在开发学习过程中总会遇到各种各样的问题,当时解决之后,如果没能做好笔记,过一段时间之后很容易遗忘。...搭配vuepress做成可以在线阅读的笔记本。...为什么选择vuepress: 1.使用vue的时候比较多 2.vuepress的界面比较符合我的审美 开工 1.创建仓库并设置仓库开启github page setting->GitHub Pages...这个分支在我们第一次提交代码后才会被创建,当然你也可以提前创建。 2.克隆这个库在你本地 使用vuepress进行初始化。...并在该库的setting中将你刚生成的令牌添加到变量中去。 ${access_token},access_token就是我们取的变量的名字,变量的值是我们在GitHub中生成的一个个人令牌。

    71620

    如何在 vuePress中添加博客导流公众号-即输入验证码解锁全站文章

    解决办法: 把上面的代码单独成一个js,放到.vuepress中公共 js 目录下,/.vuepress/public/js/btwplugin.js window.onload = function...name: 'itclanCoder', qrcode: '你自己的公众号二维码xxx.jpg', keyword: '验证码', }); }; 而把readmore.js添加到头部.../public/js/btwplugin') // 引入那段代码脚本,直接把那段代码写到这里不行?...方式 1-以插件形式全局注入组件 在/.vuepress/中的config.js配置插件中,以插件的方式全局引入的,具体插件的引入可以见文档vuepress 使用插件 module.exports =...编译打包失败即 window/document is not defined 问题 二维码不显示问题 当实现了文章的隐藏后,发现弹出框内的二维码不正常显示,这个时候,你需要查看openWrite博客设置的二维码是否正确的

    3.5K10

    用我这套模板,几分钟做出文档网站!

    以后你要做自己的文档网站,直接用这个模板,不用写代码,有手就行。VuePress 文档网站制作教程一、项目启动先花 30 秒的时间启动项目。...Markdown 配置VuePress 的基本功能就是把我们写的 Markdown 文件渲染成网站,我们可以在 markdown 配置中自定义网站的渲染规则,比如显示代码块的行号、支持更细层级的标题渲染等...[ 'vuepress-plugin-baidu-autopush']4、支持代码复制这个插件对程序员来说可太实用了,只需一行配置,用户就能一键复制网站上的代码块:配置代码如下:// https://..., { canonical_base: domain, count: 10000, // 需要自动推送的文档目录 posts_directories: [], },],6、显示文章标签插件...比如在某篇文章开头定义了如下代码:一行代码就能开启配置了:// https://github.com/zq99299/vuepress-plugin/tree/master/vuepress-plugin-tags

    50510

    手把手教你用vuepress搭建自己的网站(1)

    代码上: 文件结构非常清晰,可维护性,可拓展性好 为什么推荐选择-VuePress VuePress Vue 驱动,强大的插件生态系统,官方文档详细 支持搜索引擎优化(SEO),单页面应用,按需加载,...甚至写原生JS,Ts,HTML,CSS`,无任何压力阻碍,更加的灵活,可定制化 可以自定义开发主题,任意修改,网站风格不在千篇一律 支持 PWA(自动生成 Service Worker),像 app 应用一样添加到手机桌面上...使用文档,可以去尝试一下,这个不仅仅可以写Ts,在md也可以写TypeScript 在自己用 VuePress搭建网站的过程中,从零开始,一行行代码的配置,编写,以及考虑代码模块化的拆分,维护性,可实现按需定制化...,到最终部署上线,自定义域名等,在这个过程中,踩了很多坑 当然,也借鉴了不少网上的博客,但很多不是把配置写死,就是代码拓展性极其受限,而且每个人遇到的问题都是不一样的,而官方文档 VuePress的 API...itclancoder>npm -v 6.14.4 警告 请确保你的 Node.js 版本 >= 8 NodeJs 下载地址:(NodeJS-长期支持版下载) 安装git bash:用于向 github 提交代码

    1.2K20

    一键提交代码,实现自动化更新和部署个人博客!

    vuePress 相比起docsify,vuepress具有以下优点: 1、生成的是预渲染的静态HTML,这对于搜索引擎优化(SEO)非常友好。...感兴趣的同学可以查阅vuepress官网:https://theme-hope.vuejs.press/zh/ 宝塔面板 网站搬迁之后问题也随之而来,之前在github上通过pages是可以轻松实现一键提交代码自动化部署的...现在就稍微麻烦了些,在网上查找了资料后发现,只需要利用宝塔面板和git配置,同样可以实现在本地的vuepress项目git push提交代码后,自动更新部署博客网站,下面进入正题。...WebHook 为实现自动化,在宝塔面板的软件商店搜索WebHook进行安装,它能够在代码仓库发生变动时自动部署更新服务。 点击设置,在WebHook中添加下面的代码部署脚本。 # 部署脚本 #!...Gitee仓库配置 1.在服务器上生成 SSH 公共密钥,然后添加到gitee该项目的公钥管理中。

    11210

    vuepress建站过程中遇到的一些问题

    页面显示-404 在 vuepress说明了文件路径与页面路由之间的映射关系 文件的相对路径 页面路由地址 /README.md / /guide/README /guide/ /README.md /...侧边栏显示的是文件路径,而非文件名 当您的md文件没有任何内容时,就会显示文件路径,如/read/lingdu/wanted.html),如下所示 ?...RC版不会再加入新的功能了,主要着重于除错 当然,网上也有说在package.json,添加如下代码也可以解决,可自行测试 resolutions: { "watchpack":"1.7.2" }...,基本上就完成了,如果您觉得github pages访问很慢,也可以将代码托管给gitee或者coding等一些第三方平台上的,这样访问速度就会快些 当然你也可以直接cloneblogcode 源码进行二次修改...,该模板没有掺杂特别多的东西,在示例的md中也有对应的markdown语法的拓展的演示,可自行修改 一上来,就折腾一堆文件,不明不白的东西,难免会令新手奔溃,这就像读源码的,一上来,读上千行的代码,根本不知道从哪看起

    3.1K20

    vuepresss建站过程中遇到的一些问题

    页面显示-404 在 vuepress说明了文件路径与页面路由之间的映射关系 文件的相对路径 页面路由地址 /README.md / /guide/README /guide/ /README.md /...侧边栏显示的是文件路径,而非文件名 当您的md文件没有任何内容时,就会显示文件路径,如/read/lingdu/wanted.html),如下所示 ?...RC版不会再加入新的功能了,主要着重于除错 当然,网上也有说在package.json,添加如下代码也可以解决,可自行测试 resolutions: { "watchpack":"1.7.2" }...,基本上就完成了,如果您觉得github pages访问很慢,也可以将代码托管给gitee或者coding等一些第三方平台上的,这样访问速度就会快些 当然你也可以直接cloneblogcode 源码进行二次修改...,该模板没有掺杂特别多的东西,在示例的md中也有对应的markdown语法的拓展的演示,可自行修改 一上来,就折腾一堆文件,不明不白的东西,难免会令新手奔溃,这就像读源码的,一上来,读上千行的代码,根本不知道从哪看起

    1.4K20

    手把手教你用vuepress搭建自己的网站(2)

    页面具体内容配置 基本配置 要让你的网站显示内容, 就需要进行配置, 需要在.vuepress文件夹下新建一个总的配置文件config.js, 这个文件的名字是固定的,即.vuepress/config.js...当然,您现在看到,网站上有图片没有正常的显示,那是因为没有添加图片造成的,网站上一些图片,logo 等静态资源可以放到.vuepress目录下的一个public目录下的 这个public是自己创建的,vuepress...上面的目录树结构中,fontend文件夹下的tools与js都是两个文件夹,下面对应的有md文件,默认会以README.md为默认的路由 至此 你如果仔细看看config.js里面的一些配置的话,你会发现,代码配置越来越多...随着你往后想要配置的 nav,slidebar,导航栏,侧边栏,以及插件的增多,如果没有对 config.js 进行分割 该文件的配置将会越来越长,越来越臃肿,到最后,连你自己都看不下去,无法忍受了的,对于后期的代码维护...,以及拓展是极其不友好的,所以在一开始,就考虑一下代码的拆分,更多的是方便自己,一劳永逸 不要觉得这个很麻烦,不抽离,越往后,越是灾难,到最后,自己可能在也不会去看了的 如果以上的讲解依然不清楚:可以研究一下

    2.6K20

    如何快速搭建好看的个人博客(完整配置与源码)

    页面具体内容配置 基本配置 接下来要让页面显示内容, 就需要进行配置, 新建一个总的配置文件config.js, 这个文件的名字是固定的. cd .vuepress touch config.js config.js..., 就和官网一样, 点击指南显示的是对应的侧边栏,目前目录有node \ database \ web等, 这些目录下都存放着多个md文件: module.exports = { themeConfig...github部署 将代码部署到 Github Pages, 你可以看vuepress文档: vuepress部署, 也参照我这里写的的步骤来部署 第一步: 首先确保你的项目满足以下几个条件: 文档放置在...docs目录中 使用的是默认的构建输出位置 vuepress以本地依赖的形式被安装到你的项目中, 在根目录package.json文件中包含如下代码: // 配置npm scripts "scripts..."devDependencies": { "vuepress": "^1.2.0" } 第二步: 创建github仓库 在github上创建一个名为blog的仓库, 并将代码提交到github上

    1.5K10
    领券