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

是否可以在Jekyll中的代码高亮显示块中添加一个真正的链接?

在Jekyll中的代码高亮显示块中添加一个真正的链接是不可能的。Jekyll是一个静态网站生成器,它使用Liquid模板语言来生成静态网页。代码高亮显示块是通过Liquid标签{% highlight %}来实现的,它只能用于在生成的网页中显示代码,并不能添加链接。

如果您想在Jekyll中的代码高亮显示块中添加链接,您可以考虑以下解决方案:

  1. 在代码高亮显示块的上方或下方添加一个普通的链接。您可以使用Markdown语法或HTML标签来创建链接,并将其放置在代码块的周围。这样用户就可以点击链接跳转到相关页面。
  2. 使用Jekyll的插件或自定义Liquid标签来实现自定义功能。您可以编写自己的插件或Liquid标签,以在代码高亮显示块中添加链接。但是这需要您具备开发插件或自定义标签的能力,并且需要对Jekyll的内部机制有一定的了解。

总结起来,Jekyll本身并不支持在代码高亮显示块中添加链接。如果您有特定的需求,可能需要考虑其他解决方案或使用其他工具来实现。

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

相关·内容

GitHub 12个实用技巧

你可以直接复制一个图片到剪贴板,当你粘贴的时候,你的图片将会自动上传到云,然后展示在页面上。 #3 美化代码 如果你想编写一个代码块,以三个反引号开头,GitHub会尝试猜测你用的什么语言。...但是如果你直接粘贴一个段Vue,Typescript或者JSX代码,你可以指定出来以得到正确的语法高亮。 注意第一行的 ```jsx : ? 意味着这段代码可以正确的显示: ?...你可以在PR的描述中写fixes #234。 当合并PR的时候,会自动关闭那个issue。是不是很方便:) 了解更多。 #5 链接到评论 是否想要链接到某个特定的评论?...点击评论框用户名旁边的时间,就可以得到链接了。 ? #6 链接到代码 是否想要链接到一行特定代码? 打开一个文件,点击代码左边的行号,或者按住shift选择多行。 分享这个URL,可以链接到这些代码。...如果你想把你的issues添加到你的项目管理中来,你可以在页面右上方点击Add Cards搜索你想添加的,这里的搜索有特殊的语法,比如输入is:pr is:open,意味着你可以找到所有打开的PRs,如果你想修复

1.3K20

【译】你可以用GitHub做的12件 Cool 事情

但如果你写了一些类似于 Vue, Typescript, JSX 这样的语言,你可以明确指定得到正确的高亮。 注意第一行中的 ```jsx 这意味着代码段将会呈现出: (这个扩展于 gists 。...4 在 PR 中用关键词关闭 Issues 假设你创建了一个用于修复 Issues#234 的 PR ,你可以在你 PR 的描述中填写 fixes#234 (或是在你 PR 任意评论中填写都是可以的)。...看到了吧,浏览器的 URL 已经被更新为行号了。如果你按住 shift,同时点击其他行号, URL 再次被更新,并且你也高亮显示页面中的一段代码。...12 把 GitHub 当做 CRM 使用 假设你有一个存有一些文本内容的网站,你不想将文本内容存储于真正的 HTML 源码中。 相反的,你想要将这些文本块存储于非开发人员能轻松的进行编辑的地方。...可能是一个版本控制系统,甚至是一个审核流程。 我的建议是:使用 GitHub 厂库中的 Markdown 文件来存储这些文本内容,然后使用前端组件来拉取这些文本块并展示在页面上。

84120
  • Jekyll 优化合集

    实现 代码高亮   Jekyll 代码高亮可以使用 Pygments、Rouge、Prism、Highlight JS等工具实现,据说大部分的高亮博客中基本上都是使用 Pygments。...important; } }   另外,也需要在 _config.yml 文件中在导航栏中添加链接,如下所示。...此处,为了原生支持 LaTex 语法中采用双$符号来声明公式,同时也相应调整了 MathJax 的配置。于是就可以在基于文章模板的页面中直接使用如下所示的 LaTex 声明即可正确显示数学公式了。...当然,如果想要全站所有的页面都有这个功能,可以在_layouts 目录下的所有模板文件的 body 之前都添加以下代码,或者在 _includes 目录下的全局模块文件 head.html 或者 footer.html...文件中添加以下代码。

    2.1K30

    将 GitHub Pages 从 Redcarpet 切换到 kramdown

    列表项里嵌套的代码块 嵌套在列表项中的代码块在 Redcarpet 中使用 Tab 进行缩进即可,而在 kramdown 中需要根据列表项的内容开始位置决定缩进的字符数。...TOC 链接 在我之前的一篇文章 GFM 与 Redcarpet 的不同点 中,描述了 Redcarpet 与 GFM 自动生成的 TOC 链接的区别,而 kramdown 即使启用了 input: GFM...表格 在 Redcarpet 中如下写法能直接显示你写的内容: READ|WRITE|SHARE 但在 kramdown 中会解析成表格: READ WRITE SHARE 所以需要将 | 转义。...C++ 代码片断进行语法高亮。...rouge 支持的语言列表可以参考如下链接: List of supported languages and lexers 图片上面空行 在 Redcarpet 中,如下写法的图片和文字之间会换行: Hello

    61020

    基于Jekyll与Github Pages搭建博客

    而 Jekyll 是一个生成静态网页的工具,在 Github 上绑定自己的域名后可以当作个人博客访问。 那么接下来就开始用这两个工具搭建一个属于我们自己的博客吧。 1....如果完成了上面环境的配置,打开命令行,执行gem install jekyll,然后保佑安装过程一切正常,安装后执行jekyll -v检测是否安装成功,如果成功显示版本,那么恭喜你,搭建博客过程中最让人云里雾里的一部分终于完成了...顺便一提,我修改到最后才发现这个模板使用的代码高亮库 Prism.js 里面不支持 C++ 语言,作为一个学 C++ 的人突然感到非常绝望,于是又花了不少时间查资料学着重新配置 Prism。...博客高亮代码设置(2019.9.30) 根据博客_config.yml的内容,本博客利用了rouge作为语法高亮插件。...如果博客里原来没有引用,注意需要在head.html中加入 添加css文件后,高亮代码设置完成了,上传至GitHub

    1.2K10

    使用github+jekyll搭建个人博客

    :4000就可以看到我们的博客模样: 1.6 后话 这只是jekyll提供的最基本的博客原型,当然你可以更改其中的样式、结构来变成自己喜欢的模样,同时还可以安装高亮插件、数学公式插件等等,...他的命名有严格的规定,必须是2012-02-22-artical-title.md这样的形式,MARKUP是你所使用标记语言的文件后缀名,根据_config.yml中设定的链接规则,可以根据你的文件名灵活调整...进入自己的github主页,点击settings -> SSH and GPG keys -> New SSH key -> 填写title以及复制刚才公钥中的内容 验证 在cmd中输入命令,显示出自己的用户名...然后在浏览器中输入Rynxiao.github.io,就可以看到我们在本地中搭建的博客样子了 二、复制别人现有的博客模板 进入http://jekyllthemes.org/,挑选一个自己喜欢的模板...详细的更改配置可以在模板的主页中读取,一般都会有介绍 在浏览器中输入你的账户名.github.io,就可以看到你喜欢的博客模样了 参考链接 https://bigballon.github.io/posts

    91460

    语法高亮不够漂亮?这里有你想要的 Rouge 主题

    想必文本编辑器的代码着色风格你已经找到了中意的了,那么你在网上 post 上去的代码呢? Rouge 是一款基于 Ruby 的语法高亮工具,能为你的代码生成漂亮的语法高亮样式。...---- 在 Jekyll 中使用 Rouge 语法高亮插件 Jekyll 中的 __config.yml 文件记录了 Jekyll 的最核心配置。...在 Jekyll 的配置文件中这样配置它们: markdown: kramdown kramdown: input: GFM syntax_highlighter: rouge 其中,input...于是我尝试了一些,并贴出了我的 C# 代码在 Rouge 自带语法高亮主题下的效果。 一般来说很难找到一种语法高亮适用于各种语言,所以选择的时候推荐选一个差不多的,然后再慢慢改。...以下每张图片的后面都标注了这种风格主题再 rouge 中的名称,使用上一节中提到的命令可以生成语法高亮样式。 ? ▲ github 需要额外设置前景色 #24292e ?

    1.8K30

    将 GitHub Pages 从 Redcarpet 切换到 kramdown

    列表项里嵌套的代码块 嵌套在列表项中的代码块在 Redcarpet 中使用 Tab 进行缩进即可,而在 kramdown 中需要根据列表项的内容开始位置决定缩进的字符数。...表格 在 Redcarpet 中如下写法能直接显示你写的内容: READ|WRITE|SHARE 但在 kramdown 中会解析成表格: READ|WRITE|SHARE 所以需要将 | 转义。...C++ 代码片断进行语法高亮。...rouge 支持的语言列表可以参考如下链接: List of supported languages and lexers 图片上面空行 在 Redcarpet 中,如下写法的图片和文字之间会换行: Hello...[](/img.png) 而 kramdown 中这种写法图片会直接接在文字后面显示,不换行。如果需要换行则应在图片上面空一行: Hello, world! ![](/img.png)

    40910

    用Github搭建个人博客

    在jekyll templates中可以看到,是支持include的,只需要在根目录下创建一个名为_includes的目录,把页面片放到这个目录中,然后用下面的语法加载对应的页面片文件即可: {% include...于是,我们可以用同样的方法建立导航、头部之类的公用代码,然后放到_includes目录中,在需要的位置引用。...相关插件 做为一个技术博客,常用会需要展示代码,有几种方式可以让我们在页面中展示所需的代码片断或者Demo效果。...高亮展示 对于代码的阅读体验,当然能高亮显示会更好些,jekyll也支持相应的代码高亮显示,像这样: {% highlight 代码类型 %} 代码放这里 {% endhighlight %} 支持的代码类型可以在...添加RSS 要方便定阅,可以添加RSS输出到我们的站点上,大体分为三步: 1.修改设置文件 name: 站点名称 description: 站点说明 url: 站点URL 2.在github上有一个jekyll-rss-feeds

    74010

    你真的会搜索么?

    加强搜索 awesome一般是用来收集学习、工具、书籍类相关的项目 示例: awesome redis  搜索优秀的redis相关项目,包括框架、教程等 5、高亮显示某一行代码 高亮显示1行:地址后紧跟.../spring/SpringBootJdbcExampleApplication.java#L13-L53  高亮显示标注13行到53行代码 6、项目内搜索 使用按键 t 使用 t 后如下图 ?...info:  查找指定站点的一些基本信息。 inurl:  搜索我们指定的字符是否存在于URL中。 Link:  link:xx.com可以返回所有和xx.com做了链接的URL。...注意事项 Google查询是不区分大小写的。(除布尔操作符OR,OR在表示布尔含义时一定要大写) Google通配符;(仅代表搜索词组中的一个词。...”关键字” (+后面不能有空格) ,双引号会使Google强制搜索包含关键字的内容 NOT 和 – : 从查询中忽略一个单词,-后不能跟空格 OR 和 | :查找搜索中的一个或另外一个关键字;在google

    77920

    使用Jekyll显示Jupyter笔记本

    笔记本: jupyter notebook 将Jupyter笔记本导出为Markdown 本节演示了Jupyter笔记本的一些常见功能,可以在Jekyll博客上显示HTML。...Iris数据集将用作生成本指南中输出的示例。 1.打开感兴趣的笔记本,或使用下面的代码创建示例笔记本。运行所有相关单元格,以便在页面上显示你想要在Jekyll博客上显示的内容。...有关转义字符和格式化块的更多信息,请参阅Jekyll文档。 以下部分显示如何通过调整并设置表格和图像样式以改进显示。 扩展默认SCSS Jupyter中的表格输出转换为HTML表格。...1.在/exampleblog/assets文件夹中创建一个名为main.scss的新文件。...[jupyter_table.png] [jekyll_table.png] 在Jekyll中添加图像 通过markdown添加图像需要将图像存储在项目目录中。

    3.9K20

    Jekyll 文章侧边索引导航

    前言 Jekyll 生成目录的方案 第一种方案 第二种方案 第三种方案 实践 布局 目录生成 自适应 最终代码 参考资料 前言   Jekyll 与 Hexo 不同之处有很多,其中一处是在文章页面中不支持原生...而在 Hexo 中,即使主题不支持侧边悬浮的优化目录导航,也可以通过最简单的方式在文章的开始位置生成目录。虽然这种目录永远固定在文章开始的地方,但是总算是能够通过大小标题来给读者一个大概的思路。...Jekyll 生成目录的方案   如参考资料 1 中所提到的,如果想要在 Jekyll 中实现文章目录,有三种不同的方案可供选择: 第一种方案   利用完整的标签来生成静态目录,可以看到在本文的开头就是这样的一个实例...# gemfile gem "jekyll-toc" # 添加后需执行 bundle install 安装插件 # _config.yml # 在全局配置文件中启用 jekyll-toc 插件 plugins...具体实现如最终代码 common.sass 和 layout.sass 所示。在没有 sass 编译环境下,此处的 sass 代码可以取出转换为 css 使用。 最终代码 <!

    1.6K30

    Prose:Github所见即所得站点编辑器

    写在前面 最近才发现一个基于Github Pages的Jekyll内容编辑器Prose,感觉内容编辑更快、发布什么的更方便,所以想推荐给使用github的友友们,以前都是在markdown工具里写,然后再用...登录成功 可以看到登录成功后会依次列举个人代码库(Repository)。选中之前开通Github Pages服务的代码库,可以浏览相应的文件以及创建新的文本文件。...这些都是之前发布的文章文件 3.接着,我们新建一个文件,点击NEW FILE,然后编辑内容,编辑内容的时候,Prose支持Markdown标签的高亮显示,如下: ?...预览 Prose项目的架构特点与展望 Prose的架构实现是以Backbone与Jekyll为基础,应用托管在Github上,浏览器端直接与GitHub API交互。...Prose是一个基于Github Pages的Jekyll内容编辑器,它的出现使得内容编辑更快、更方便。 参考链接via:http://blog.jobbole.com/23527/

    1K10

    15 个有意思的 JavaScript 和 CSS 库推荐! 你用过几个?

    Carbon允许你创建并分享代码组成的美丽图像。你所需要做的就是将你的代码粘贴到编辑器中,或直接自己编写代码。你可以通过更改字体样式、编辑器主题、语法高亮和甚至窗口按钮来自定义图像的外观。...该库可以在浏览器中工作,也可以在node.js环境中工作。 Jarvis ? 一款基于Webpack仪表板的智能浏览器,它可以给你显示你在webpack构建所需的所有重要信息。...它提供了渲染后HTML的实时预览,即时语法错误检查以及markdown和预览模式之间的同步滚动。该编辑器还支持强大的扩展,如颜色选择器、图表代码块、UML代码块等。 Micron.js ?...Micron是一个允许你为DOM元素添加不同的CSS增强动画的库。其中交互可以通过HTML数据属性或通过链接JavaScript方法来设置速度、消除和其他选项来控制。...Kutt是一个免费的可以用来缩短你的URL、管理链接和设置自定义域的开源库。它有一个易于使用的API,并允许你创建和删除URL,以及使用详细统计信息跟踪它们。

    2K00

    打造前端瑞士军刀,为你开发路上披荆斩棘

    每个工具都可以点击查看打开链接,因为微信内部不能查看外链,所以大家可以点击查看原文打开外链后进行查看 主要是为了帮助大家搜集一下前端开发中要用到的一些东西,打造一个前端开发工具字典,方便大家查阅。...UI库,越弄越好了 主要说上面一些,具体的一些vue插件可以从下面这个链接找: Vue插件集合 React 因为平时用react用的比较少,希望小伙伴在评论中进行补充,然后我再添加进来。...,后续发现了jekyll比较好的一个主题,所以换成了jekyll,大家可以参考一下。...html 转 markdown,IP 地址查询 JSON 代码高亮 草料二维码 - 用于根据链接生成二维码 cubic-bezier - 用于生成贝塞尔曲线,css中可以有效地使用 CSS...使用 Vetur 目前比较好的 Vue 语法高亮 Bracket Pair Colorizer 可以为代码中的匹配的括号自动着色,以不同的颜色进行区分,这样我们可以轻易地辨别某个代码块的开始与结束。

    1.2K11

    前端开发工具总结

    - 另外一款搭建PC网页的UI库,越弄越好了 主要说上面一些,具体的一些vue插件可以从下面这个链接找: Vue插件集合 React 因为平时用react用的比较少,希望小伙伴在评论中进行补充,然后我再添加进来...jekyll:将纯文本转化为静态网站和博客。由于环境依赖的问题,所以安装起来可能稍费劲那么一点。 hexo:快速、简洁且高效的博客框架,照着文档分分钟就可以在本地跑起来。...,后续发现了jekyll比较好的一个主题,所以换成了jekyll,大家可以参考一下。...html 转 markdown,IP 地址查询 JSON 代码高亮 草料二维码 - 用于根据链接生成二维码 cubic-bezier - 用于生成贝塞尔曲线,css中可以有效地使用...使用 Vetur 目前比较好的 Vue 语法高亮 Bracket Pair Colorizer 可以为代码中的匹配的括号自动着色,以不同的颜色进行区分,这样我们可以轻易地辨别某个代码块的开始与结束。

    2.7K21
    领券