列表项里嵌套的代码块 嵌套在列表项中的代码块在 Redcarpet 中使用 Tab 进行缩进即可，而在 kramdown 中需要根据列表项的内容开始位置决定缩进的字符数。...不过这点其实严格说起来应该是我在使用 Redcarpet 时的写法没有遵循 Jekyll 的文档，参考 Collections。...表格 在 Redcarpet 中如下写法能直接显示你写的内容： READ|WRITE|SHARE 但在 kramdown 中会解析成表格： READ WRITE SHARE 所以需要将 | 转义。...C++ 代码片断进行语法高亮。...而改为 kramdown + rouge 的组合后，只能使用 cpp。
GitHub 前不久发布了 New Features 公告，GitHub Pages now faster and simpler with Jekyll 3.0，宣布从 2016 年 5 月 1 日起...列表项里嵌套的代码块 嵌套在列表项中的代码块在 Redcarpet 中使用 Tab 进行缩进即可，而在 kramdown 中需要根据列表项的内容开始位置决定缩进的字符数。...表格 在 Redcarpet 中如下写法能直接显示你写的内容： READ|WRITE|SHARE 但在 kramdown 中会解析成表格： READ|WRITE|SHARE 所以需要将 | 转义。...C++ 代码片断进行语法高亮。...而改为 kramdown + rouge 的组合后，只能使用 cpp。
查看本站点_config.yml文件，便可以查看到本站所使用的插件。 引入插件 插件以 Ruby 代码或模块的方式存在，使用时通常引入相应的代码或模块即可。...代码高亮 本站点模板默认开启了代码高亮，编写博客时只需要使用 markdown 的代码块方法编写即可。...本站点采用的代码高亮方案是通过 rouge 插件实现的，并直接生成的 Sublime Text 类似的展示效果。...若使用 rouge 生成其他风格代码高亮样式，可以通过右侧链接进行学习：http://gohom.win/2016/02/04/update-github-rouge/ 。...教程链接 免费构建自己的博客-开发环境安装 免费构建自己的博客-编写第一篇博客 免费构建自己的博客-管理博客代码与发布到Github 免费构建自己的博客-Jekyll进阶 免费构建自己的博客-进一步丰富博客
06:51 写了那么久的代码，找到了满意的代码着色风格吗？...想必文本编辑器的代码着色风格你已经找到了中意的了，那么你在网上 post 上去的代码呢？ Rouge 是一款基于 Ruby 的语法高亮工具，能为你的代码生成漂亮的语法高亮样式。...---- 在 Jekyll 中使用 Rouge 语法高亮插件 Jekyll 中的 __config.yml 文件记录了 Jekyll 的最核心配置。...在 Jekyll 的配置文件中这样配置它们： markdown: kramdown kramdown: input: GFM syntax_highlighter: rouge 其中，input...于是我尝试了一些，并贴出了我的 C# 代码在 Rouge 自带语法高亮主题下的效果。 一般来说很难找到一种语法高亮适用于各种语言，所以选择的时候推荐选一个差不多的，然后再慢慢改。
github pages 一直想添加代码高亮 highlighter ，基于 jekyll 3.0 的 rouge 终于搞定了： ?...下载代码高亮库 在 cmd 中输入： rougify style monokai.sublime > rouge.css 可以下载 rouge.css 出来，将这个 css 文件放到 github pages...项目中存放 css 的目录下，并在 html 中引用这个库，请自行更改引用的路径： 配置文件...背景色为白色，字段显示不出来，所以我把 rouge.css 的背景色改成了黑色，在 rouge.css 最后面添加如下代码： div[class="highlight"] > pre > code[class..."highlight"] { background:black; } 最后效果图如最开始的图片那样了，可以在我的 github pages 代码中查看具体的详情
如果完成了上面环境的配置，打开命令行，执行gem install jekyll，然后保佑安装过程一切正常，安装后执行jekyll -v检测是否安装成功，如果成功显示版本，那么恭喜你，搭建博客过程中最让人云里雾里的一部分终于完成了...博客高亮代码设置（2019.9.30） 根据博客_config.yml的内容，本博客利用了rouge作为语法高亮插件。...环境，我们可以用命令配置rouge文件，步骤如下： 打开命令行，输入命令安装rouge：gem install rouge 安装之后，使用以下命令查看自带的样式有哪些：rougify help style...同时，由于感觉代码字号太小，我还试着修改博客的字号大小，首先，根据head.html的信息，博客参数引用自hux-blog.min.css文件中: <!...这里有你想要的 Rouge 主题 ----
功能需求 原有的 Rouge 代码高亮支持的语言种类较少、代码主题有限； 由于主题的文章模板限制了文字宽度在适合阅读的 30 字左右，图片尺寸相应也受到了限制，无法放大和集中观看； 主题提供的首页是文章卡片...实现 代码高亮 Jekyll 代码高亮可以使用 Pygments、Rouge、Prism、Highlight JS等工具实现，据说大部分的高亮博客中基本上都是使用 Pygments。...Rouge Rouge 是 Jekyll 也是 H2O 主题默认的代码高亮工具，支持的语言与其他工具相比都要少一些。...highlighter: rouge Prism 本站所采用的代码高亮就是 Prism，选择 Prism 的原因主要有三点： Prism 生成代码比较简洁，没有多余代码，颜色在不同网站主题上都适用...此处，为了原生支持 LaTex 语法中采用双$符号来声明公式，同时也相应调整了 MathJax 的配置。于是就可以在基于文章模板的页面中直接使用如下所示的 LaTex 声明即可正确显示数学公式了。
主要环节有：安装Ruby，安装RubyGems，安装jekyll，安装代码高亮插件，安装node.js 安装Ruby ruby官网下载安装：https://www.ruby-lang.org/en/downloads...cd到博客文件夹，开启服务器 image.png watch为了检测文件夹内的变化，即修改后不需要重新启动jekyll 我的环境下启动报错(你的可能没有)，再安装yajl-ruby和rouge image.png...jekyll中文网 http://jekyllcn.com, jekyll英文网 http://jekyllrb.com jekyll中的css是用sass写的，当然直接在_sass/_layout.scss...注意，在github上面好像不支持rouge，所以要push到github上时，我将配置文件_config.yml中的代码高亮改变为highlighter: pygments就可以了 博客默认是没有评论系统的...可能出现的问题 hitimes/hitimes (LoadError) 错误代码： C:/Ruby22/lib/ruby/2.2.0/rubygems/core_ext/kernel_require.rb
Jekyll 3.0了，有以下几点变动： 2016年5月1号开始，GitHub Pages只支持kramdown,作为Jekyll的默认Markdown引擎，如果你用的是其它的引擎，那么你有三个月时间进行更新...代码高亮的实现方式也要改啦，只支持Rouge的方式。...原先如果使用{% highlight js %} code {% endhighlight %} 的方式进行代码高亮，那么就得修改啦，用```即可，详见 https://help.github.com...Jekyll 3.0对本地版本的优化，我没有使用过，不太了解，有兴趣的同学自己到上面的链接看吧。...将不再支持Textile 更多Jekyll 3.0的特性可以看Upgrading from 2.x to 3.x。
目录,记得一定要进入创建的目录，否则服务无法开启 cd blog jekyll serve #启动你的http服务复制代码 本地服务开启后，Jekyll服务默认端口是4000...，所以我打开浏览器，输入：http://localhost:4000 即可访问 到这里一个简单的博客页面就会显示出来了。...[更多](http://unixhelp.ed.ac.uk/shell/jobz5.html).复制代码 Jekyll 的核心其实是一个文本转换引擎。...在整个过程中你可以设置 URL 路径，你的文本在布局中的显示样式等等。这些都可以通过纯文本编辑来实现，最终生成的静态页面就是你的成品了。...highlighter: rouge markdown: kramdown复制代码 等待大概1-2分钟之后，再次刷新username.github.io，就能看到我们的blog了。
如何本地预览 参考 GitHub 的官方说明： Setting up your Pages site locally with Jekyll 本地预览报错 undefined method map for...tap in /_layouts/page.html jekyll 3.8.5 | Error: undefined method `map' for false:FalseClass Did you...如何修改代码高亮风格 可以通过 _config.yml 文件里的配置项 highlight_theme 来指定代码高亮风格，支持的风格名称列表参考我维护的另一个项目： https://github.com.../mzlogin/rouge-themes 在项目主页可以看到每种风格的预览效果。...如果是使用本模板最新代码，那不用做什么，会自动引用最新版本。
//使用gem安装Jekyll gem install jekyll //使用Jekyll创建你的博客站点 jekyll new blog #创建你的站点 //开启Jekyll服务 //进入blog...，输入：http://localhost:4000 即可访问 到这里一个简单的博客页面就会显示出来了。...在整个过程中你可以设置 URL 路径，你的文本在布局中的显示样式等等。这些都可以通过纯文本编辑来实现，最终生成的静态页面就是你的成品了。...highlighter: rouge markdown: kramdown 等待大概1-2分钟之后，再次刷新username.github.io，就能看到我们的blog了。...五.给博客增加访客评论功能 一般静态博客添加访客评论功能都是用disqus来集成的。一般都是放在博客的一篇文章的最后，当然这个排版就看你自己怎么设计的了。我这里就贴一下我集成disqus的代码。
Fork过来的页面，此时你的博客地址应该是：xxx.github.io xxx 是你的Github用户名* 当你在浏览器的新窗口输入：xxx.github.io 此时能就能访问到你的博客了，但是你的博客里面依旧显示是我的博客内容...+ jekyll 的方式 我采用的搭建博客的方式是第二种： 使用GitHub Pages +jekyll的方式。...id，将统计代码替换为自己的百度统计id，即 # hm.src = "//hm.baidu.com/hm.js?...# google 分析追踪id # Build settings markdown: kramdown kramdown: input: GFM syntax_highlighter: rouge...paginate中paginate的6为每页显示6篇文章，port：4001 是jekyll启动端口号， # statistic analysis 统计代码 # 百度统计 id，将统计代码替换为自己的百度统计
前言 Jekyll 生成目录的方案 第一种方案 第二种方案 第三种方案 实践 布局 目录生成 自适应 最终代码 参考资料 前言 Jekyll 与 Hexo 不同之处有很多，其中一处是在文章页面中不支持原生...后面的例子是采用了 Bootstrap 框架中的 toc js 插件，能够满足目标一，且能跟踪内容位置来切换显示的二级目录，相对来说功能更加强大。...实际上，从需要维护的代码量来说，第一个例子的做法所需的 js 代码应该是算少的，但是不是存在完全不使用 js 代码也能实现这样的功能的方案呢？实际上是存在的。...由于想要目录内容块随着内容滑动而改变 position，我们可以采用 sticky 的 position 方案。...总计为，720+280+30+10*2=1050 px（这里忽略了 2px 的边界）。不显示目录时，让正文占据所有宽度，并设置目录块为 display: none，即隐藏该元素。
使用 关于监听地址 Cloud Studio 的监听地址 any list {:toc} Cloud Studio 搭建 Jekyll 远程调试环境搭建 今天随手搜了一下关键字Cloud IDE...发现了很多相关内容，但是使用了几个觉得体验不佳，毕竟本地 IDE 可以自己进行各种配置，而且对于 Gitter 来说只需要将配置 Sync 一下，立刻可以创造最佳 Coding Env 不过有一个 IDE 比较突出...jekyll s 进行自动部署然后在localhost:4000进行访问 但是在 WebIDE 里面我们并不是访问本地，因此需要监听另一个地址 图片 查看了一下 Coding WebIDE 和 Jekyll...的官方帮助2需要使用这样的代码 jekyll s --host=0.0.0.0 然后访问的端口改成 4000 就可以远程调试了 Cloud Studio 的监听地址 有时候要跑一些 server 的时候...引用链接 ---- Coding-WebIDE↩ Jekyll Doc↩
看到了吧，浏览器的 URL 已经被更新为行号了。如果你按住 shift,同时点击其他行号， URL 再次被更新，并且你也高亮显示页面中的一段代码。...尽管它不会突出显示你当前的页面位置，但侧边栏会一直存在。 这些链接需要你手动维护，但总的来说，我认为它可以做得很好。 如果需要的话可以看看。...如果你不知道，现在就来学习，这一节是专门用于讨论使用 Jekyll 来构建一个站点的。 最简单的就是： GitHubPages+Jekyll会通过一个漂亮的主题来渲染你的 README.md 文件。...12 把 GitHub 当做 CRM 使用 假设你有一个存有一些文本内容的网站，你不想将文本内容存储于真正的 HTML 源码中。 相反的，你想要将这些文本块存储于非开发人员能轻松的进行编辑的地方。...我的建议是:使用 GitHub 厂库中的 Markdown 文件来存储这些文本内容，然后使用前端组件来拉取这些文本块并展示在页面上。
Jekyll提供了各种主题和插件，因此用户无需担心Web开发。 本指南将指导您完成安装Jekyll的过程，并将其配置为从Jupyter笔记本显示多种输出类型。...笔记本： jupyter notebook 将Jupyter笔记本导出为Markdown 本节演示了Jupyter笔记本的一些常见功能，可以在Jekyll博客上显示HTML。...Iris数据集将用作生成本指南中输出的示例。 1.打开感兴趣的笔记本，或使用下面的代码创建示例笔记本。运行所有相关单元格，以便在页面上显示你想要在Jekyll博客上显示的内容。...有关转义字符和格式化块的更多信息，请参阅Jekyll文档。 以下部分显示如何通过调整并设置表格和图像样式以改进显示。 扩展默认SCSS Jupyter中的表格输出转换为HTML表格。...使用 $$包裹LaTeX以创建数学块。
在使用jekyll去写博客的时候,有时候会输入双括号 或者是段html，但在jekyll默认会把对应的值赋到对应的字段占位上面,所以我们去想，如何去把这个输入做一个转义： 网络上提供的几种解决方案 1....使用"\"转义 \{\{ page.title \}\} 显示结果 {{ page.title }} 2....在两个大括号之间添加一个空格 { { page.title } } 显示结果： { { page.title } } 3....使用raw语法，具体使用如下： {% raw %} content # 代码块 {% endraw %} 4. 如何显示{% raw %}{% endraw %}呢？...具体如下： {% assign openTag = '{%' %} {{ openTag }} raw %} content # 代码块 {{ openTag
Jekyll 中 Sass 的使用 什么是 Sass 关于 Sass 的优势 Usage Install Sass 目录结构 使用 include stylesheet to html...项目实例 参考文献 Jekyll 中 Sass 的使用 什么是 Sass Sass 是一群超级懒的人创造的 Css 快速编程工具 Sass（Syntactically Awesome Style...通过这种新的编程语言，你可以使用最高效的方式，以少量的代码创建复杂的设计。它改进并增强了 CSS 的能力，增加了变量，局部和函数这些特性。...关于 Sass 的优势 Sass 的嵌套可以将多层级的 Css badcode 显得跟简练 Sass 的变量可以统一控制设计风格 Sass 的@import等导入方法可以实现设计模块化分离 Sass...这部分文件写的时候上方要加 YAML header: 最顶上的两行横杠不能删除, 这个是为了让文件按照 Jekyll 标准进行读取 使用 _sass/test.scss .content { height
当你顺利安装到此后，你的软件就已经安装完成，可以使用了！ 五、安装Jekyll Ruby 软件已经安装完成，接下来就是我们的博客的相关内容的安装了。..., kramdown, kramdown- parser-gfm, liquid, mercenary, forwardable-extended, pathutil, rouge, safe_yaml...w=1258&h=489&f=png&s=167330] 部署以后我们在线网站就可以访问了；https://bugstack.cn/ 九、自动发布 如果每次都是这样去本地编译在部署到服务端，代码又得维护在...（这将生成与_config.yml中配置变量url的值的规范链接） 16 jekyll clean 清空编译_site 17 jekyll serve 本地启动服务 18 jekyll serve -...从没有那件事情是可以轻轻松松的，在 天灾人祸 来临的时候，能帮你抵挡的都是你日积月累的能力。就像；是时候展示真正的技术了！ Jekyll 搭建的博客还是蛮好看的，也蛮容易维护的。
领取专属 10元无门槛券
手把手带您无忧上云
