首页
学习
活动
专区
工具
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.2K20

【译】你可以用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 文件来存储这些文本内容,然后使用前端组件来拉取这些文本并展示页面上。

83320

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

59220

基于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.1K10

使用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

88860

语法高亮不够漂亮?这里有你想要 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)

39310

用Github搭建个人博客

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

71710

使用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

你真的会搜索么?

加强搜索 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

75120

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.5K30

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

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

99810

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

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

1.9K00

如何为自己创建一个既时尚又好用博客网站

具有以下特性: 特性 支持标签和类别 支持社区简介与添加作者头像 支持分页 支持pygments风格语法高亮 支持评论 支持自定义侧边栏背景图片 响应式布局 基于Bootstrap Glyphicon...如果在安装Bundler过程,gem提示缺少依赖包,可以按照提示现将依赖包安装完成之后,安装Bundler。 ?...你需要在disqus上为你要添加评论功能域名设置一个disqus简称。...第二步:设置dbyll 拿到disqus简称之后就可以_config.yml文件文件添加disqus: disqus short name;添加完成之后发布你网站,就可以看到disqus评论板块了...侧边栏(sidebar) 你可以在编辑/_includes/sidebar.html来自定义你侧边栏。 其他问题 发表文章首页不显示

1.8K70

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

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

1.2K11
领券