hashtagerrors/syntax-highlighter

此包已被弃用且不再维护。作者建议使用 bhashkar007/syntax-highlighter 包。

Craft 中 Prism 语法高亮的强大功能

安装: 198

依赖项: 0

建议者: 0

安全: 0

星标: 4

关注者: 2

分支: 5

开放问题: 7

语言:JavaScript

类型:craft-plugin

1.0.0 2019-05-21 16:49 UTC

This package is auto-updated.

Last update: 2023-02-06 07:23:59 UTC


README

Craft 中 Prism 语法高亮的强大功能。

Screenshot

要求

此插件需要 Craft CMS 3.0.0 或更高版本。

安装

要安装插件,请按照以下说明操作。

  1. 打开您的终端并转到您的 Craft 项目

     cd /path/to/project
    
  2. 然后告诉 Composer 加载插件

     composer require hashtagerrors/syntax-highlighter
    
  3. 在控制面板中,转到设置 → 插件,并点击语法高亮器的“安装”按钮。

语法高亮器概述

语法高亮器设置

Prism 是最受欢迎的语法高亮器之一,因其能够自定义构建你想要使用的语言高亮器和插件,被许多博客或网站广泛使用。

此插件可以帮助你通过选择所需的编程语言、插件和主题来类似地构建 Prism 文件,然后在前端使用一行代码添加代码高亮。

插件设置页面有 178 种编程语言、8 个主题和 4 个插件可供选择。一旦选择所需的编程语言、主题和插件,插件将基于所选内容构建 JS 和 CSS 文件,然后在前端调用时自动获取。

Screenshot

语法高亮器字段

插件添加了一个 语法高亮器 字段类型,然后显示一个添加代码、选择代码类型、添加标题并指定要高亮显示的行(如果插件设置中启用了此功能)的区块。

Screenshot

语法高亮器前端

在模板中使用 {{ craft.syntaxHighlighter.render(entry.fieldHandle) }} 将在前端显示高亮代码。Screenshot

配置语法高亮器

插件有以下设置

选择语言(必填):选择应启用的语言。由于这是一个必填字段,至少需要选择 1 种语言。默认 标记、CSS、C-like、JavaScript、Twig

默认语言:在代码块字段的下拉菜单中默认选择的编程语言。默认 Twig

主题:你希望在前端启用的 Prism 主题。默认 Prism

行号:在代码块中启用行号。默认 默认

行高亮:在代码块中启用行高亮。默认 True

显示语言:在代码块中显示使用的编程语言。默认 False

复制到剪贴板按钮:在代码块中启用复制到剪贴板按钮。默认 True

最大高度 设置代码容器的最大高度(以px为单位),避免长代码导致滚动条过长。默认 500 留空或输入0以禁用滚动。

注意:由于此插件在保存插件设置时每次都会构建文件,因此插件目录应具有 写入 权限。特别是对于hashtagerrors\syntax-highlighter\src\assetbundles\syntaxhighlighterfrontend 文件夹。

使用语法高亮

  1. 在设置页面中选择所需的编程语言、主题和插件。
  2. 使用 Syntax Highlighter 字段类型创建一个新字段。
  3. 将字段添加到您的区域。
  4. 在代码块的文本区域复制粘贴或写下您的代码。
  5. 从代码类型下拉列表中选择语言。
  6. 输入要高亮的行号(如果插件设置中已启用)。
  7. 添加标题以在代码块下方显示文本(可选)。
  8. 在模板中使用 {{ craft.syntaxHighlighter.render(entry.fieldHandle) }} 显示高亮代码。

语法高亮路线图

  • 允许用户添加自定义CSS。
  • Prism的 文件高亮 插件。
  • Prism的其他插件。

总是欢迎新的想法。您可以在这里发布您的想法、请求或问题。

喜欢它吗?

通过购买我一杯咖啡来表示您的喜爱和支持!

Buy Me A Coffee

Hashtag Errors 提供