b13/codeblock

TYPO3中用于显示带语法高亮的文本代码片段的自定义内容类型。

安装次数: 5,651

依赖项: 0

建议者: 0

安全: 0

星级: 4

关注者: 8

分支: 8

开放问题: 3

类型:typo3-cms-extension

2.0.2 2023-01-26 11:00 UTC

This package is auto-updated.

Last update: 2024-09-04 11:14:03 UTC


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扩展,这些扩展有助于我们在客户项目中提供价值。作为我们工作方式的一部分,我们专注于测试和最佳实践,以确保我们所有代码的长期性能、可靠性和结果。