README

fs_code_snippet 是一个TYPO3扩展。它实现了一个内容元素，使您能够渲染各种编程语言的代码片段。它依赖于 fluid_styled_content 渲染。

它使用后端的 T3Editor 和前端代码片段库 prism.js。

需求

• TYPO3 9 LTS 或 10 LTS
• fluid_styled_content
• t3editor

安装和配置

安装和配置此扩展非常直接。只有少数几件事情可以进行配置。

安装

要安装此扩展，请执行以下步骤

• 转到扩展管理器
• 安装扩展
• 加载静态模板

配置

大多数配置都是通过 TypoScript 常量完成的，这些常量可以在 TYPO3 后台的常量编辑器中编辑。

• 可以通过常量 {$plugin.tx_fscodesnippet.view.templateRootPath} 覆盖 TemplateRootPath。然而，也可以使用 FLUIDTEMPLATE 的回退机制来覆盖默认模板。

• 在常量编辑器中，可以根据 prism.js 提供的主题调整代码片段的 theme。

• 启用行号。

可扩展性

默认情况下，此扩展仅提供从 prism.js 支持的巨大编程语言列表中精选的编程语言子集。这样做的主要原因是为了防止包含的 JavaScript 因包含大量您不需要的代码而变得臃肿。但是，如果您确实需要默认集合中未包含的编程语言的支持，您可以自己添加任何语言。您可以通过覆盖编程语言字段的 TCA 来实现这一点，以包括更多的编程语言，并使用相应的语法高亮程序扩展 JavaScript。

要向 TCA 添加新语言，您可以使用包含的 CodeSnippetLanguage 枚举的常量来获取所需字符串。在任何您的扩展中，创建文件 Configuration/TCA/Overrides/tt_content.php 并向其中添加以下代码

.. code-block:: php

$GLOBALS['TCA']['tt_content']['columns']['programming_language']['config']['items'][] = ['Python' => \DanielGoerz\FsCodeSnippet\Enumeration\CodeSnippetLanguage::PYTHON];

您可以添加 prism 支持的任何语言标识符。无论如何，T3Editor 不会知道该语法，并且将在“混合”模式下运行。

要启用前端中的语法高亮显示，您需要包含 prism.js 的相应 JavaScript 组件。对于 Python，这将是从 prismjs.com 或 github 下载的 components/prism-python.js。您可以从 prismjs.com 或 github 下载组件，或者您可以使用此扩展附带 的 gulp build 生成新的所有文件。

要做到这一点，转到扩展文件夹并编辑 gulpfile 以包括 buildJs 任务中所需的组件（例如 prismBasePath + 'components/prism-python.js'）。然后运行

.. code-block:: bash

yarn install
gulp build

现在您应该有一个支持 Python 的 FsCodeSnippet.js。

请确保将生成的 FsCodeSnippet.js 移动到您的扩展中，并从那里包含它。否则，如果将来在某个时候更新 fs_code_snippet，它将被覆盖。

由 Daniel Goerz (@b13) 制作，充满爱意