页面代码美化 v1.0.0
页面代码美化
2022-02-16 更新日志
  • 自动识别页面的code和pre标签美化显示
页面代码美化

模块介绍

「页面代码美化」是一个自动识别页面的code和pre标签美化显示

页面代码美化
    识别
        自动识别 code / pre 标签
        brush:xxx 语言标记
    展示
        行号开关
        深色 / 浅色主题

功能特性

  • 代码高亮与格式化:粘贴代码自动美化,主题跟随站点
  • 支持多种语言识别,长代码也保持可读
  • 直接嵌入文章 / 文档富文本中使用
  • 兼容最新运行环境(Laravel 13 / PHP 8.5)

使用原理

CodePretty 会自动识别页面上 <code> 和 <pre> 标签,如果这两个标签包含了形如 class="brush:xxx" 的属性,那么 CodePretty 就会自动将这两个标签所包含的代码美化显示。

如 JavaScript 代码:

<code class="brush:js">
console.log('测试代码');
</code>

如 PHP 代码:

<code class="brush:php">
    echo '测试代码';
</code>

如 JSON 代码:

<code class="brush:json">
{
    "name": "CodePretty",
    "version": "1.0.0",
    "description": "页面代码美化" 
}
</code>

后台菜单

  • 功能设置
  • 功能设置 → 页面代码美化

使用场景

  • 技术博客 / 文档页展示代码片段
  • 需要统一深色或浅色代码风格的站点
QQ
微信
客服