H1 — heading【免费下载链接】jekyll-theme-chirpyA minimal, responsive, and feature-rich Jekyll theme for technical writing.项目地址: https://gitcode.com/GitHub_Trending/je/jekyll-theme-chirpy{: .mt-4 .mb-0 }H2 — heading{:>- Chapter - Section - Paragraph任务清单ToDo list- [ ] Job - [x] Step 1 - [x] Step 2 - [ ] Step 3- [ ]与- [x]会被 kramdown 渲染成 HTML 复选框。Chirpy 在 _includes/refactor-content.html 中做了进一步美化把原生复选框替换为 Font Awesome 图标——已完成项显示为实心对勾圆fa-check-circle未完成项显示为空心圆fa-circle并配合checked类着色视觉上比原生复选框更贴合主题风格。描述列表Description listSun : the star around which the earth orbits Moon : the natural satellite of the earth, visible by reflected light from the sun这是 kramdown 原生支持的术语 冒号定义语法适合编写词汇表、API 参数说明等场景术语独占一行下一行以:开头书写定义。四、引用块与四类提示框Prompts普通引用块直接使用前缀 This line shows the _block quote_.引用块的左边框与文字颜色由 _sass/base/_typography.scss 定义blockquote-border-color变量。Chirpy 最具特色的排版能力之一是四类语义化提示框语法为引用块 紧随其后的 IAL 类名 An example showing the tip type prompt. {: .prompt-tip } An example showing the info type prompt. {: .prompt-info } An example showing the warning type prompt. {: .prompt-warning } An example showing the danger type prompt. {: .prompt-danger }底层实现链路如下样式 Mixin_sass/abstracts/_mixins.scss 定义了mixin prompt($type, $fa-content, ...)为每个类型生成背景色变量引用与前置 Font Awesome 图标引用块分支_sass/base/_typography.scss 中当blockquote带有prompt-*类时去除左边框、改为左侧图标色块布局并分别注册四种类型——tip灯泡图标regular 风格、info信息图标旋转 180°、warning警告图标、danger三角警示图标明暗两套配色提示框的背景与图标颜色分别定义在 _sass/themes/_light.scss 与 _sass/themes/_dark.scss 中跟随站点明暗模式自动切换。因此在技术写作中tip可用于补充技巧、info用于背景说明、warning用于注意事项、danger用于强警告语义清晰且零额外依赖。五、表格Chirpy 支持 kramdown 的标准 Markdown 表格语法并通过冒号控制列对齐| Company | Contact | Country | | :--------------------------- | :--------------- | ------: | | Alfreds Futterkiste | Maria Anders | Germany | | Island Trading | Helen Bennett | UK | | Magazzini Alimentari Riuniti | Giovanni Rovelli | Italy |:---左对齐、:---:居中、---:右对齐宽表格的横向滚动由 _includes/refactor-content.html 保证构建时检测到table标签后会自动为其外层包裹div classtable-wrapper从而在窄屏上获得横向滚动条而非撑破版面。六、链接与脚注自动链接将 URL 放入尖括号即可生成可点击链接无需书写文本形式http://127.0.0.1:4000该地址为本机 Jekyll 开发服务器的默认端口实际写作时替换为你的目标 URL。脚注与反向脚注正文中使用引用标记Clicking the hook will locate the footnote[^footnote], and here is another footnote[^fn-nth-2].文末定义脚注内容即Reverse Footnote反向脚注定义区[^footnote]: The footnote source [^fn-nth-2]: The 2nd footnote source点击正文中的[^footnote]标记会跳转到文末定义处点击定义末尾的返回箭头可回到正文。返回箭头的样式由 _config.yml 中的 kramdown 配置footnote_backlink: #8617;#xfe0e;控制↩︎ 字符。七、行内代码与文件路径行内代码使用反引号包裹可嵌入段落任意位置This is an example of Inline Code.行内代码的底色、圆角与字号由 _sass/base/_syntax.scss 中的code.highlighter-rouge规则定义。Chirpy 还提供了一个特殊的文件路径样式——在反引号包裹的路径后追加 IAL 类Here is the /path/to/the/file.extend{: .filepath}.该写法在 _sass/base/_syntax.scss 中专门定义了.filepath类无背景色、使用独立的--filepath-text-color文字色、加粗显示用于在正文中醒目地标出文件路径与普通行内代码区分开。八、代码块无高亮 / 语言高亮 / 文件名标头普通代码块Common不带语言标识的围栏代码块不会启用语法高亮 This is a common code snippet, without syntax highlight and line number. 对应地_sass/base/_syntax.scss 中对nolineno、plaintext、console、terminal等类型会隐藏行号列。指定语言的代码块if [ $? -ne 0 ]; then echo The command was not successful.; #do the needful / exit fi;语言由围栏后的标识符决定bash、sass、yaml、js 等均可。语法高亮由 kramdown 的 Rouge 引擎负责配置见 _config.ymlsyntax_highlighter: rouge块级代码默认开启行号block.line_numbers: true、起始行号为 1行号列样式.lineno定义在 _sass/base/_syntax.scss且设置了user-select: none复制代码时不会带上行号。指定文件名的代码块sass import colors/light-typography, colors/dark-typography; {: file_sass/jekyll-theme-chirpy.scss}通过{: file路径 }可以为代码块添加文件名标头。其实现位于 _includes/refactor-content.html构建时检测到file...属性后会生成一个code-header标头左侧显示文件图标fa-file-code与文件名右侧自动附上一个复制按钮。复制按钮的行为由 _javascript/modules/components/clipboard.js 实现点击后通过 ClipboardJS 复制代码内容精确到code .rouge-code区域保证只复制代码本体图标由fa-clipboard切换为对勾fa-check并弹出复制成功提示tooltip通过 2 秒的timeout锁TIMEOUT 2000毫秒防止连点随后自动恢复图标与提示状态见 clipboard.js。代码块整体含标头、行号、暗色底色的圆角、间距与三圆点装饰在 _sass/base/_syntax.scss 中统一定义。九、数学公式MathJax演示页展示了 Chirpy 对 LaTeX 数学公式的完整支持使用前必须在 Front Matter 中声明math: true。渲染器为 MathJax按展示形式分为两类行内公式$a \ne 0$直接嵌入段落。块级公式带编号与引用$$ \begin{equation} \sum_{n1}^\infty 1/n^2 \frac{\pi^2}{6} \label{eq:series} \end{equation} $$可以使用\eqref{eq:series}在正文中引用该公式编号。块级公式不带编号$$ x {-b \pm \sqrt{b^2-4ac} \over 2a} $$MathJax 的加载与配置细节加载开关_includes/js-selector.html 中当page.math为真时先加载本站的 assets/js/data/mathjax.js 配置再异步加载 MathJax 核心脚本定界符配置mathjax.js将$...$、\(...\)识别为行内公式$$...$$、\[...\]识别为块级公式公式编号tags: ams启用 AMS 自动编号模式配合\label/\eqref实现交叉引用溢出处理displayOverflow: scroll让超长的显示公式以滚动方式呈现避免撑破页面布局。十、Mermaid 图表与数学公式类似使用 Mermaid 前需在 Front Matter 声明mermaid: true。然后在代码块中编写 Mermaid 语法该示例为甘特图Gantt diagramMermaid 同样支持流程图、时序图、类图、饼图等是技术文章中绘制架构与流程的利器。底层实现_javascript/modules/components/mermaid.js加载开关_includes/js-selector.html 在page.mermaid为真时引入 Mermaid 脚本渲染流程loadMermaid()找到所有language-mermaid代码块把源码文本转移到新建的pre classmermaid节点中再调用mermaid.initialize()与mermaid.init()完成渲染主题联动themeMap Theme.newThemeMap(default, dark)将 Mermaid 主题与站点明暗模式绑定切换主题时通过message事件监听触发refreshTheme()从已渲染 SVG 中取回源码并重新初始化渲染保证图表配色与页面主题始终一致。十一、图片对齐、浮动、明暗模式与懒加载演示页给出了 Chirpy 最完整的图片布局语法。图片均使用 kramdown 图片语法 IAL 属性组合常用形式归纳如下默认居中、带说明文字Desktop View{: width972 height589 } _Full screen width and center alignment_图片下方紧跟着一行斜体文本_..._即渲染为图注caption。左对齐限宽Desktop View{: width972 height589 .w-75 .normal}左浮动文字环绕Desktop View{: width972 height589 .w-50 .left}右浮动文字环绕Desktop View{: width972 height589 .w-50 .right}明暗双模式图片 阴影light mode only{: .light .w-75 .shadow .rounded-10 w1212 h668 } dark mode only{: .dark .w-75 .shadow .rounded-10 w1212 h668 }.w-75/.w-50控制图片宽度比例.normal取消浮动、.left/.right实现左右浮动.light/.dark同一张图在明/暗模式下分别显示——只需放置两张内容相同但配色不同的图浏览器按当前主题显示对应那张.shadow/.rounded-10添加阴影与圆角。注意以上示例中的/posts/20190808/...图片路径来自原演示站点本仓库中并不存在实际使用请替换为你自己站点assets/目录下的真实图片资源。图片布局的底层处理全部发生在 _includes/refactor-content.html 的构建期重写中要点包括类名提取从图片的class中识别normal、left、right、light、dark及w-*等布局类移到外层包装元素上弹窗查看非首页环境下图片会被自动包进a classpopup img-link链接点击即可放大预览懒加载未提供lqip的图片会自动附加loadinglazy并显示微光占位shimmer效果提供lqipbase64 缩略图的图片则以blur模糊占位 data-src渐进式替换相关样式见 _sass/base/_typography.scss。十二、视频嵌入Chirpy 通过 Jekyll include 提供零配置的视频嵌入能力{% include embed/youtube.html idBalreaj8Yqs %}【免费下载链接】jekyll-theme-chirpyA minimal, responsive, and feature-rich Jekyll theme for technical writing.项目地址: https://gitcode.com/GitHub_Trending/je/jekyll-theme-chirpy创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考