b13 / codeblock
TYPO3中用于显示带语法高亮的文本代码片段的自定义内容类型。
Requires
- php: ^7.4 || ~8.0
- scrivo/highlight.php: ^9.15
- typo3/cms-core: ^10.4 || ^11.5 || ^12.0
Requires (Dev)
- typo3/tailor: ^1.2
README
这个扩展做什么?
Code Block是TYPO3扩展。它通过使用highlight.php
处理源代码来添加一个内容类型,以显示带语法高亮的代码片段。应用的CSS类与highlight.js渲染的相同,但转换发生在服务器上(而不是使用JS时的浏览器)。
渲染结果在TYPO3中像任何其他内容元素一样进行缓存。使用此扩展,您可以选择不将highlight.js添加到您的JS构建中。这有助于减小您网站的JavaScript大小,并允许为例如AMP页面渲染源代码片段。
代码语言
此扩展支持highlight.php支持的任何代码语言。这些可以通过在内容元素中选择设置或自动检测来指定。
安装
将此扩展添加到您的TYPO3设置中。使用composer安装:composer req b13/codeblock
。
将TypoScript添加到您的网站扩展设置中
@import 'EXT:codeblock/Configuration/TypoScript/setup.typoscript'
添加PageTS(将元素添加到新内容元素向导中)
@import 'EXT:codeblock/Configuration/PageTs/PageTs.tsconfig'
如果您想使用自己的Fluid模板,请像这样将模板根路径添加到设置中
tt_content.codeblock.templateRootPaths.10 = EXT:your_site_extension/Resources/Private/Contenttypes/Templates
集成商注意
如果您的Fluid布局“默认”使用<f:spaceless>
,您应该使用自定义内容类型Fluid模板以避免前端选项卡/空格在某些部分丢失。《Spaceless》移除了标签之间的空格,而《highlight.php》可以添加一系列<span>foo</span> <span>bar</span>
字符串,这些字符串需要标签之间的空格才能可读并有意义。
样式
CSS样式需要手动包含。添加到HTML输出的类是自动生成的。它们的样式需要在CSS文件中指定,以便添加自定义样式。例如,对于JetBrain的darcula主题
.hljs { display: block; overflow-x: auto; padding: 0.5em; background: #2b2b2b; } .hljs { color: #bababa; } .hljs-strong, .hljs-emphasis { color: #a8a8a2; } .hljs-bullet, .hljs-quote, .hljs-link, .hljs-number, .hljs-regexp, .hljs-literal { color: #6896ba; } .hljs-code, .hljs-selector-class { color: #a6e22e; } .hljs-emphasis { font-style: italic; } .hljs-keyword, .hljs-selector-tag, .hljs-section, .hljs-attribute, .hljs-name, .hljs-variable { color: #cb7832; } .hljs-params { color: #b9b9b9; } .hljs-string { color: #6a8759; } .hljs-subst, .hljs-type, .hljs-built_in, .hljs-builtin-name, .hljs-symbol, .hljs-selector-id, .hljs-selector-attr, .hljs-selector-pseudo, .hljs-template-tag, .hljs-template-variable, .hljs-addition { color: #e0c46c; } .hljs-comment, .hljs-deletion, .hljs-meta { color: #7f7f7f; }
此扩展使用highlight.php
(请参阅https://github.com/scrivo/highlight.php)。此包包含许多不同的CSS样式主题您可以使用。
许可协议
与TYPO3核心一样,codeblock根据GPL2或更高版本授权。有关详细信息,请参阅LICENSE文件。
背景、作者及进一步维护
TYPO3高度可配置,很容易通过几行TCA配置将自定义内容类型添加到系统,通过简单的PageTS配置将类型添加到新内容元素向导中的元素列表,以及几行TypoScript和Fluid模板。此扩展以与我们为b13的TYPO3项目创建自定义内容类型相同的方式添加内容类型。
EXT:codeblock
最初由Andreas Hämmerl和David Steeb于2019年创建,用于斯图加特的b13。我们使用它在我们b13.com的博客上显示源代码,我们在这里有一个完整的AMP网站,不包括非AMP JavaScript文件。
查看我们开发的更多TYPO3扩展,这些扩展有助于我们在客户项目中提供价值。作为我们工作方式的一部分,我们专注于测试和最佳实践,以确保我们所有代码的长期性能、可靠性和结果。