”Markdown是一种轻量级标记语言，创始人是约翰·格鲁伯（John Gruber）。它允许人们 “使用易读易写的纯文本格式编写文档，然后转换成有效的 HTML 文档。”...,转换成html最方便的方式是用插件 我找了几个插件，最后觉得还是atome的markdown-preview-enhanced插件比较好用，预览界面简洁美观，效果如下： ?...首先安装markdown-preview-enhanced插件(安装成功后会在扩展中显示，点击Toggle可以实时看效果) 如果把显示的效果放到外面静态页面中，在markdow preview 界面右键...-HTML-HTML(offline) 导出html，导出的html中包含着样式，我们可以把样式单独放在一个文件中，供其他页面使用 markdown-preview-enhanced插件的语法与markdown...hidden; } ```javascript ```javascript function add(x, y) { return x + y } [代码行数](https://shd101wyy.github.io
✨ 项目基本结构 目录结构如下： ├── css │ └── style.css └── index.html 本节教程我会带大家使用 HTML 和 CSS 来制作一个仿 GitHub 的登录界面...在登录页面添加徽标 接下来在 class=“wrapper” 的 div 的最顶部添加一个图标。在这里使用了 GitHub 网站的 logo。...首先我们创建两个输入框和一个登录按钮。第一个输入框用于输入邮箱地址，第二个输入框用于输入登录密码。...登录页面的效果就实现啦！...地址（给个star ❤️ 吧）：https://github.com/wanghao221/moyu 总结 希望通过上面的教程，大家已经学会了如何使用 HTML 和 CSS 代码来创建仿 GitHub
该项目托管在github上，地址为：https://github.com/markedjs/marked/ 项目的安装 下载项目之后，在根目录下执行如下 npm 命令 进行安装 $ npm install...使用markedjs 解析编译Markdown内容 在页面中引入 marked.min.js 文件 <script type="text/javascript" src="/js/marked.min.js...说一下我的<em>markdown</em>的应用 本人的项目中不是在前端对<em>Markdown</em>进行<em>转换</em>，而是在编辑器中按照<em>Markdown</em>语法编辑好内容之后，通过markedjs将内容<em>转换</em>成html，存入到数据库中，在前台取出来的直接就是解析后的内容了...然而美中不足的是，可能受<em>markdown</em>默认语法的影响，对 a标签 的解析只有是当前<em>页面</em>打开，没有新窗口打开的语法。...<em>使用</em>！控制属性是否添加 要想能控制target属性，就要在[]()中<em>使用</em>某种符号进行标记。img标签对应的<em>markdown</em>的语法为![]()。借鉴img标签的语法，我把叹号放到中括号里面[!]
GitHub Pages Github Pages 是面向用户、组织和项目开放的公共静态页面搭建托管服务，站点可以被免费托管在 Github 上，你可以选择使用 Github Pages 默认提供的域名...它有一个模版目录，其中包含原始文本格式的文档，通过一个转换器（如 Markdown）和我们的 Liquid 渲染器转化成一个完整的可发布的静态网站，你可以发布在任何你喜爱的服务器上。...Jekyll 也可以运行在 GitHub Page 上，也就是说，你可以使用 GitHub 的服务来搭建你的项目页面、博客或者网站，而且是完全免费的。...但如果我们只是在 GitHub 上面使用的话，到不需要知道 Jekyll 的语法，一般 Github 会自动将我们写的 Markdown 文件转换成静态页面。...使用 Jekyll 需要使用 Markdown 语法来写你的文章，不过 Markdown 语法非常简单，做为程序员来讲基本上两三天就掌握了，大家也可以在我的博客参考这篇文章：markdown 使用总结。
前言 Jekyll 生成目录的方案 第一种方案 第二种方案 第三种方案 实践 布局 目录生成 自适应 最终代码 参考资料 前言 Jekyll 与 Hexo 不同之处有很多，其中一处是在文章页面中不支持原生...不好的地方是与标准的 Markdown 语法略有不同，而且每次都得在文章内容页面开头加上以下代码。如果你使用带有 markdownlint 插件的编辑器编辑文章时，可能会有一堆告警。...缺点在于 Github Pages 不支持这类自定义插件，你可能需要使用自定义的 workflow.yml 文件来指导 Github Action 来编译生成静态文件。...这里我们想要实践的是在未使用 Bootstrap 框架的 Jekyll 主题中增加目标一的功能，因此这两个例子的做法都不是很合适。...在没有 sass 编译环境下，此处的 sass 代码可以取出转换为 css 使用。 最终代码 <!
#7 灵活使用GitHub地址栏 GitHub的页面导航已经做的很好了，但是有些时候直接在导航栏中输入会更快。...我先创建一个GitHub wiki，我从NodeJS文档找了几个页面作为wiki的页面，然后创建一个侧边导航来模拟实际的结构。侧边栏一直存在，不会对当前页面高亮。...#11 静态博客 你可能已经知道你可以使用GitHub部署静态网页，这个部分我将告诉你用Jekyll（简单博客静态网站生成器）生成静态网页 非常简单，Jekyll会用漂亮的主题去渲染你的README.md...比如这个README页面（链接）: ? 点击设置，选择Jekyll主题。 ? 我将得到一个Jekyll主题的页面: ?...__html: marked(this.state.markdown)}} /> ); } } (我用的是marked 插件来解析markdown) 然后你可以这样使用组件: const
说下Markdown语法 逆天推荐使用VSCode编写 image.png 装这个插件写作更方便： image.png 内含：锚点使用，使用HTML，新页面跳转，目录生成 启用方式： H1H3(#...的个数)[博客园只支持H13] # H1 ## H2 ### H3 H1 H2 H3 斜体(一个*斜体)，加粗(两个*粗体)，删除线（两个~） **加粗内容** 其他内容 *斜体内容* ~~删除内容~~...直接写HTML就可以解析： print("mmd") print("mmd") 超链接、图片、锚点跳转 超链接： 页面内打开...www.cnblogs.com/dunitian/p/4822808.html#ai 汇总系列：https://www.cnblogs.com/dunitian/p/4822808.html#ai 新页面打开...：[超链接文字](url){:target="_blank"} （有些编辑器不支持，Python Markdown可以使用） 不支持就用：xxx
的网页提交一个 Markdown 文件； 在你的仓库设置那里激活 GitHub Pages 。...如果你已经对 GitHub Pages 熟悉了，你或许会对知道一些幕后的东西感兴趣，我们现在正在做一些事情去简化这个发布流程，并且让它更加如你所期待的那样在 GitHub 的其它地方创作 Markdown...如果你的页面没有一个明确的标题，并且这个文件是由 H1、H2或者 H3 标签开始的，我们会使用这个标签内容作为页面的标题，显示在浏览器的标签上。...虽然这些改动应该不会影响大多数现有站点的建设，但对于早期的 Jekyll 用户来说有两个潜在的陷阱： 如果你的站点遍历了所有页面（例如， forpageinsite.pages），你可能会发现现在有额外的页面...所以， GitHub Pages 生成过程是可以尽可能透明和可定制的，所有上面提到的特性都是以 Jekyll 的开源插件的形式实现的，也就是 Jekyll Optional Front Matter ,
、说下Markdown语法 逆天推荐使用VSCode编写 ? 装这个插件写作更方便： ? 内含：锚点使用，使用HTML，新页面跳转，目录生成 启用方式： ?...H1H3(#的个数)[博客园只支持H13] # H1 ## H2 ### H3 H1 H2 H3 斜体(一个*斜体)，加粗(两个*粗体)，删除线（两个~） **加粗内容** 其他内容 *斜体内容* ~~...直接写HTML就可以解析： print("mmd") print("mmd") 超链接、图片、锚点跳转 超链接： 页面内打开...www.cnblogs.com/dunitian/p/4822808.html#ai 汇总系列：https://www.cnblogs.com/dunitian/p/4822808.html#ai 新页面打开...：[超链接文字](url){:target="_blank"} （有些编辑器不支持，Python Markdown可以使用） 不支持就用：xxx
因为它是不需要数据库的，通过markdown编写静态文件，生成Html页面，它的优点是提升了页面的响应速度，并且让博主可以只专注于写文章，不用再去考虑如何排版。 静态。...Markdown（或 Textile）、Liquid 和 HTML & CSS 构建可发布的静态网站。 博客支持。支持自定义地址、博客分类、页面、文章以及自定义的布局设计。...//使用gem安装Jekyll gem install jekyll //使用Jekyll创建你的博客站点 jekyll new blog #创建你的站点 //开启Jekyll服务 //进入blog...Jekyll 的核心其实是一个文本转换引擎。...把整个文件都push到github上去 git add --all #添加到暂存区 git commit -m "提交jekyll默认页面"
Jekyll、Hugo、Hexo 也可以运行在 码云（Gitee.com） Pages 上，也就是说，你可以使用码云的服务来搭建你的仓库页面、博客或者网站，而且是完全免费的。...docsify 官网 4 Docute Docute 本质上就是一个 JavaScript 文件，它可以获取 Markdown 文件并将它们呈现为单页面应用。...最关键的是jekyll可以免费部署在Github上，而且可以绑定自己的域名。...2、能部署到github或者gitcafe上，不需要自己的vps，因为是静态的，迁移起来非常方便。 3、原生支持markdown。...现在github默认支持jekyll, 所以原生的文件如果放到github上，它会自动帮你生成静态网站。
Jekyll是一个用Ruby编写的静态站点生成器，支持博客并与Github页面整合。因为Github只负责托管，这种设置使数据分析共享和可视化变得简单。...1.打开感兴趣的笔记本，或使用下面的代码创建示例笔记本。运行所有相关单元格，以便在页面上显示你想要在Jekyll博客上显示的内容。...如果日期格式不正确，帖子可能不会出现在博客上： touch YYYY-MM-DD-example-post.md 4.markdown文件应以三个破折号开头并包含标题，这些标题为Jekyll提供了适当的页面数据以便填充帖子的信息...在markdown中将图像的引用修改为适当的路径。用两个花括号和双引号括起路径。...1.为了让Jekyll将LaTeX转换为PNG，可以通过MathJax获得CDN。
---- 在 Jekyll 中使用 Rouge 语法高亮插件 Jekyll 中的 __config.yml 文件记录了 Jekyll 的最核心配置。...其中，markdown 字段的值表示使用哪一款插件来将 Markdown 文本转换为 HTML 页面结构。 GitHub 推荐使用的 Jekyll 的 Markdown 插件为 kramdown。...kramdown 是一个强大且高性能的文本转换引擎，你可以通过阅读 kramdown 和 markdown 较大的差异比较 - Hom 了解 kramdown 的强大之处。...: GFM 指的是 GitHub Flavored Markdown Spec。...Rouge 支持的语言可以前往此处查看：Rouge 生成 Rouge 语法高亮样式 当然，以上配置只是告诉 kramdown 转换引擎在转换 Markdown 为 HTML 的时候，使用 rouge 格式的样式
下面就总结下我使用的方法，希望能帮到有用github搭建个人博客的同学。...在jekyll templates中可以看到，是支持include的，只需要在根目录下创建一个名为_includes的目录，把页面片放到这个目录中，然后用下面的语法加载对应的页面片文件即可： {% include...代码展示 直接展示 由于Github是支持使用Markdown的，所以我们可以使用Markdown的代码展示方式，具体可以看Markdown中的CODE BLOCKS部分。...评论系统 网上有几个可以嵌入到静态站点的评论系统，像多说、友言、畅言等等，还有Jekyll模板里默认使用的DISQUS。...除了Markdown之外，还可以用Textile语法来写，我原先使用的博客系统Textpattern就是使用这种语法。
因为它是不需要数据库的，通过markdown编写静态文件，生成Html页面，它的优点是提升了页面的响应速度，并且让博主可以只专注于写文章，不用再去考虑如何排版。 静态。...Markdown（或 Textile）、Liquid 和 HTML & CSS 构建可发布的静态网站。 博客支持。支持自定义地址、博客分类、页面、文章以及自定义的布局设计。...//使用gem安装Jekyll gem install jekyll //使用Jekyll创建你的博客站点 jekyll new blog #创建你的站点 //开启Jekyll服务 //进入blog...[更多](http://unixhelp.ed.ac.uk/shell/jobz5.html).复制代码 Jekyll 的核心其实是一个文本转换引擎。...把整个文件都push到github上去 git add --all #添加到暂存区 git commit -m "提交jekyll默认页面"
通过使用Markdown或其他格式编写博客文章，并在Next.js中使用静态生成来生成预渲染的静态页面，可以使博客页面更快地加载，并提高SEO排名。...它使用 GraphQL 查询数据，支持多种数据源和插件。 你可以查看它的 GitHub 和官网了解更多。 4.Jekyll star 数 45K+。...VuePress 使用 Markdown 来写作和生成网站内容，同时支持 Vue 组件和自定义页面。...你可以查看它的 GitHub和官网了解更多。 11.Mkdocs star 数 16K+。 MkDocs 是一个简单易用的静态网站生成器，基于 Markdown 文档构建漂亮的 HTML 文档页面。...Middleman 是一个用 Ruby 编写的静态站点生成器，它可以将 Markdown、ERB 模板和 YAML 配置文件转换为静态 HTML 文件。
Jekyll 是采用Ruby语言实现的将纯文本转换为静态博客网站的利器，也是本站点的关键技术。本文将对Jekyll中的进阶内容进行说明。...它有一个模版目录，其中包含原始文本格式的文档，通过一个转换器（如 Markdown）和我们的 Liquid 渲染器转化成一个完整的可发布的静态网站，你可以发布在任何你喜爱的服务器上。...Jekyll 也可以运行在 GitHub Page 上，也就是说，你可以使用 GitHub 的服务来搭建你的项目页面、博客或者网站，而且是完全免费的。...代码高亮 本站点模板默认开启了代码高亮，编写博客时只需要使用 markdown 的代码块方法编写即可。...用户在编写自己的博文内容时，使用的是 markdown 进行编写，这样作者就可以专注于内容的编写，而效果上的调整，则可以直接借助于主题功能，进行切换，详细的内容，可以通过右侧链接进行了解：http://
后续如果你想更好地理解使用的主题和进行主题自定义，也需要这方面的知识。 Markdown。Markdown 也是一种标记语言，它的语法比HTML更简单，书写量也更少，用处很广泛。...在GitHub Pages中写博客，通常就是使用Markdown。比如你正在阅读的这篇博客就是用 Markdown 编写的。...（原理上是 GitHub Pages 使用 Jekyll 将 Markdown 文件转换为HTML文件。Jekyll 还支持 Textile 文件，这里不做展开。） 阿里云。...在配置页面的 Theme Chooser 处可以选择自己喜欢的 Jekyll 主题，我现在使用的是 jekyll-theme-merlot。...设置主题后，GitHub 会在仓库自动提交保存 _config.yml 文件，内容： theme: jekyll-theme-merlot 六、设置主题 主题选择后，页面的标题和描述文字都是主题自带的，
简单易用：Jekyll 不会给用户带来不必要的复杂性和配置，它只做你告诉它去做的事情。 高度可定制化：使用 Jekyll，您可以根据自己的需求轻松地创建个人、项目或组织网站，并对其进行完全控制。...Markdown 和 Liquid 模板支持：通过渲染 Markdown 和 Liquid 模板，Jekyll 可以将您提供的内容转换为完整且静态化的可以直接托管在 Apache、Nginx 或其他 Web...主要功能： 快速生成静态文件 支持 GitHub Flavored Markdown 和大多数 Octopress 插件 一键部署到 GitHub Pages、Heroku 等平台 强大的 API，可无限扩展性能和功能...使用 JavaScript 编写，可以将包含不同类型模板的目录转换为 HTML。.../gohugoio/hugo https://github.com/jekyll/jekyll https://github.com/hexojs/hexo https://github.com/11ty
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM
