b13 · georgringer · Sep 16, 2020 · Sep 16, 2020
diff --git a/Classes/DataProcessing/HighlightProcessor.php b/Classes/DataProcessing/HighlightProcessor.php
@@ -1,4 +1,6 @@
 <?php
+declare(strict_types=1);
+
 namespace B13\Codeblock\DataProcessing;
 
 /*
@@ -25,9 +27,6 @@ class HighlightProcessor implements DataProcessorInterface
      */
     protected $contentDataProcessor;
 
-    /**
-     * Constructor
-     */
     public function __construct()
     {
         $this->contentDataProcessor = GeneralUtility::makeInstance(ContentDataProcessor::class);

diff --git a/Classes/DataProvider/CodeLanguages.php b/Classes/DataProvider/CodeLanguages.php
@@ -1,4 +1,6 @@
 <?php
+declare(strict_types=1);
+
 namespace B13\Codeblock\DataProvider;
 
 /*
@@ -21,7 +23,7 @@ class CodeLanguages
      * @param array $config
      * @return array
      */
-    public function getAll($config)
+    public function getAll($config): array
     {
         // Get all languages from highlight.php.
         $highlight = GeneralUtility::makeInstance(Highlighter::class);

diff --git a/Classes/Hooks/CodeblockPreviewRenderer.php b/Classes/Hooks/CodeblockPreviewRenderer.php
@@ -1,4 +1,6 @@
 <?php
+declare(strict_types=1);
+
 namespace B13\Codeblock\Hooks;
 
 /*
@@ -9,8 +11,11 @@
  * of the License, or any later version.
  */
 
+use Highlight\Highlighter;
 use TYPO3\CMS\Backend\View\PageLayoutView;
 use TYPO3\CMS\Backend\View\PageLayoutViewDrawItemHookInterface;
+use TYPO3\CMS\Core\Configuration\ExtensionConfiguration;
+use TYPO3\CMS\Core\Page\PageRenderer;
 use TYPO3\CMS\Core\Utility\GeneralUtility;
 
 /**
@@ -33,14 +38,46 @@ public function preProcess(
         &$headerContent,
         &$itemContent,
         array &$row
-    ) {
-        if ($row['CType'] === 'codeblock') {
-            if ($row['bodytext']) {
-                $bodytext = GeneralUtility::fixed_lgd_cs($row['bodytext'], 1000);
-                $itemContent .= $parentObject->linkEditContent(nl2br(htmlentities($bodytext)), $row) . '<br />';
+    )
+    {
+        if ($row['CType'] === 'codeblock' && $row['bodytext']) {
+            $highlight = GeneralUtility::makeInstance(Highlighter::class);
+
+            if (!$row['code_language']) {
+                $languages = $highlight->listLanguages();
+                $highlight->setAutodetectLanguages($languages);
+                $highlighted = $highlight->highlightAuto($row['bodytext']);
+            } else {
+                $highlighted = $highlight->highlight($row['code_language'], $row['bodytext']);
             }
 
-            $drawItem = false;
+            $bodytext = '<pre style="padding:2px;"><code class="hljs ' . $highlighted->language . '">' . $highlighted->value . '</code></pre>';
+            $itemContent .= $parentObject->linkEditContent((($bodytext)), $row);
+
+            $styles = $this->getStyles();
+            if ($styles) {
+                $pageRenderer = GeneralUtility::makeInstance(PageRenderer::class);
+                $pageRenderer->addCssInlineBlock('ext-codeblock', $styles);
+            }
         }
+
+        $drawItem = false;
+    }
+
+    protected function getStyles(): string
+    {
+        $previewFile = '';
+        try {
+            $previewFile = GeneralUtility::makeInstance(ExtensionConfiguration::class)->get('codeblock', 'backendPreviewStyles');
+        } catch (\Exception $e) {
+            // do nothing
+        }
+        $previewFile = GeneralUtility::getFileAbsFileName($previewFile);
+
+        if (!is_file($previewFile)) {
+            $previewFile = GeneralUtility::getFileAbsFileName('EXT:codeblock/Resources/Public/Styles/GitHub.css');
+        }
+
+        return file_get_contents($previewFile);
     }
 }
diff --git a/Configuration/TCA/Overrides/tt_content.php b/Configuration/TCA/Overrides/tt_content.php
@@ -1,15 +1,16 @@
 <?php
 
-\TYPO3\CMS\Core\Utility\ExtensionManagementUtility::addTcaSelectItem(
-    'tt_content',
-    'CType',
-    ['LLL:EXT:codeblock/Resources/Private/Language/locallang_db.xlf:tt_content.CType', 'codeblock', 'content-codeblock'],
-    'html',
-    'after'
-);
+call_user_func(static function () {
+    \TYPO3\CMS\Core\Utility\ExtensionManagementUtility::addTcaSelectItem(
+        'tt_content',
+        'CType',
+        ['LLL:EXT:codeblock/Resources/Private/Language/locallang_db.xlf:tt_content.CType', 'codeblock', 'content-codeblock'],
+        'html',
+        'after'
+    );
 
-$GLOBALS['TCA']['tt_content']['types']['codeblock'] = [
-    'showitem' => '
+    $GLOBALS['TCA']['tt_content']['types']['codeblock'] = [
+        'showitem' => '
                 --div--;LLL:EXT:core/Resources/Private/Language/Form/locallang_tabs.xlf:general,
                     --palette--;;general,
                     --palette--;;headers,
@@ -28,33 +29,33 @@
                     rowDescription,
                 --div--;LLL:EXT:core/Resources/Private/Language/Form/locallang_tabs.xlf:extended,
             ',
-    'columnsOverrides' => [
-        'bodytext' => [
-            'config' => [
-                'fixedFont' => true,
+        'columnsOverrides' => [
+            'bodytext' => [
+                'config' => [
+                    'fixedFont' => true,
+                ],
             ],
-        ],
-    ]
-];
+        ]
+    ];
 
-// Add dropdown for code language to TCA.
-$additionalColumns = [
-    'code_language' => [
-        'label' => 'LLL:EXT:codeblock/Resources/Private/Language/locallang_db.xlf:tt_content.code_language',
-        'config' => [
-            'type' => 'select',
-            'default' => '',
-            'itemsProcFunc' => 'B13\\Codeblock\\DataProvider\\CodeLanguages->getAll',
-            'renderType' => 'selectSingle',
+    $additionalColumns = [
+        'code_language' => [
+            'label' => 'LLL:EXT:codeblock/Resources/Private/Language/locallang_db.xlf:tt_content.code_language',
+            'config' => [
+                'type' => 'select',
+                'default' => '',
+                'itemsProcFunc' => \B13\Codeblock\DataProvider\CodeLanguages::class . '->getAll',
+                'renderType' => 'selectSingle',
+            ],
         ],
-    ],
-];
+    ];
 
-\TYPO3\CMS\Core\Utility\ExtensionManagementUtility::addTCAcolumns('tt_content', $additionalColumns);
+    \TYPO3\CMS\Core\Utility\ExtensionManagementUtility::addTCAcolumns('tt_content', $additionalColumns);
 
-\TYPO3\CMS\Core\Utility\ExtensionManagementUtility::addToAllTCAtypes(
-    'tt_content',
-    'code_language',
-    'codeblock',
-    'before:bodytext'
-);
+    \TYPO3\CMS\Core\Utility\ExtensionManagementUtility::addToAllTCAtypes(
+        'tt_content',
+        'code_language',
+        'codeblock',
+        'before:bodytext'
+    );
+});
diff --git a/README.md b/README.md
@@ -7,15 +7,15 @@ processed using `highlight.php` to render code snippets with syntax highlighting
 The CSS-classes applied are identical to what highlight.js would render, but the
 transformation takes place on the server (instead of the browser when using JS).
 
-The rendered result is cached like any other content element with the page in 
-TYPO3. Using this extension you can skip adding highlight.js to your JS-build. 
-This helps reduce the JavaScript size for your website and also allows rendering 
+The rendered result is cached like any other content element with the page in
+TYPO3. Using this extension you can skip adding highlight.js to your JS-build.
+This helps reduce the JavaScript size for your website and also allows rendering
 of source code snippets for AMP pages for example.
 
 ## Code Languages
 
-The extension supports all code languages that highlight.php supports. These can 
-either be specified by choosing a setting inside the content element or 
+The extension supports all code languages that highlight.php supports. These can
+either be specified by choosing a setting inside the content element or
 detected automatically.
 
 ## Installation
@@ -42,11 +42,11 @@ sense.
 
 ## Styles
 
-CSS styling needs to be included manually. The classes added to the HTML output 
-are generated automatically. Their styling need to be specified in a CSS file 
+CSS styling needs to be included manually. The classes added to the HTML output
+are generated automatically. Their styling need to be specified in a CSS file
 in order to add a custom styling. E.g. for JetBrain's darcula theme:
 
-```
+```css
 .hljs {
   display: block;
   overflow-x: auto;
@@ -119,23 +119,23 @@ in order to add a custom styling. E.g. for JetBrain's darcula theme:
 }
 ```
 
-This extension uses `highlight.php` (see https://github.com/scrivo/highlight.php). 
+This extension uses `highlight.php` (see https://github.com/scrivo/highlight.php).
 This package includes [a lot of different CSS style themes](https://github.com/scrivo/highlight.php/tree/master/styles) you can use.
- 
+
 ## License
 
 As TYPO3 Core, _codeblock_ is licensed under GPL2 or later. See the LICENSE file for more details.
 
 ## Background, Authors & Further Maintenance
 
-TYPO3 is highly configurable and it is easy to add custom content types to the system using a few lines of TCA 
+TYPO3 is highly configurable and it is easy to add custom content types to the system using a few lines of TCA
 configuration, a simple PageTS configuration to add the type to the list of elements in the New Content Element Wizard,
-and a few lines of TypoScript and a Fluid Template. 
-This extension adds a content type in the same way we create custom content types for our TYPO3 projects at 
+and a few lines of TypoScript and a Fluid Template.
+This extension adds a content type in the same way we create custom content types for our TYPO3 projects at
 [b13](https://b13.com).
 
-`EXT:codeblock` was initially created by Andreas Hämmerl and David Steeb in 2019 for [b13, Stuttgart](https://b13.com). We 
+`EXT:codeblock` was initially created by Andreas Hämmerl and David Steeb in 2019 for [b13, Stuttgart](https://b13.com). We
 use it to display source code in our blog on [b13.com](https://b13.com), where we have a full-AMP website and do not
 include non-AMP JavaScript files.
 
-[Find more TYPO3 extensions we have developed](https://b13.com/useful-typo3-extensions-from-b13-to-you) that help us deliver value in client projects. As part of the way we work, we focus on testing and best practices to ensure long-term performance, reliability, and results in all our code. 
+[Find more TYPO3 extensions we have developed](https://b13.com/useful-typo3-extensions-from-b13-to-you) that help us deliver value in client projects. As part of the way we work, we focus on testing and best practices to ensure long-term performance, reliability, and results in all our code.
diff --git a/Resources/Private/Language/locallang_db.xlf b/Resources/Private/Language/locallang_db.xlf
@@ -7,16 +7,16 @@
 			<authorEmail>typo3@b13.com</authorEmail>
 		</header>
 		<body>
-			<trans-unit id="tt_content.CType">
+			<trans-unit id="tt_content.CType" resname="tt_content.CType">
 				<source>Code Block</source>
 			</trans-unit>
-            <trans-unit id="tt_content.code_language">
+            <trans-unit id="tt_content.code_language" resname="tt_content.code_language">
                 <source>Code Language</source>
             </trans-unit>
-            <trans-unit id="tt_content.code_language.detect_automatically">
+            <trans-unit id="tt_content.code_language.detect_automatically" resname="tt_content.code_language.detect_automatically">
                 <source>detect automatically</source>
             </trans-unit>
-            <trans-unit id="tt_content.wizard.description">
+            <trans-unit id="tt_content.wizard.description" resname="tt_content.wizard.description">
                 <source>A code snippet element to show text with code highlighting.</source>
             </trans-unit>
         </body>

diff --git a/Resources/Public/Styles/GitHub.css b/Resources/Public/Styles/GitHub.css
@@ -0,0 +1,93 @@
+.hljs {
+    display: block;
+    overflow-x: auto;
+    padding: 0.5em;
+    color: #333;
+    background: #f8f8f8;
+}
+
+.hljs-comment,
+.hljs-quote {
+    color: #998;
+    font-style: italic;
+}
+
+.hljs-keyword,
+.hljs-selector-tag,
+.hljs-subst {
+    color: #333;
+    font-weight: bold;
+}
+
+.hljs-number,
+.hljs-literal,
+.hljs-variable,
+.hljs-template-variable,
+.hljs-tag .hljs-attr {
+    color: #008080;
+}
+
+.hljs-string,
+.hljs-doctag {
+    color: #d14;
+}
+
+.hljs-title,
+.hljs-section,
+.hljs-selector-id {
+    color: #900;
+    font-weight: bold;
+}
+
+.hljs-subst {
+    font-weight: normal;
+}
+
+.hljs-type,
+.hljs-class .hljs-title {
+    color: #458;
+    font-weight: bold;
+}
+
+.hljs-tag,
+.hljs-name,
+.hljs-attribute {
+    color: #000080;
+    font-weight: normal;
+}
+
+.hljs-regexp,
+.hljs-link {
+    color: #009926;
+}
+
+.hljs-symbol,
+.hljs-bullet {
+    color: #990073;
+}
+
+.hljs-built_in,
+.hljs-builtin-name {
+    color: #0086b3;
+}
+
+.hljs-meta {
+    color: #999;
+    font-weight: bold;
+}
+
+.hljs-deletion {
+    background: #fdd;
+}
+
+.hljs-addition {
+    background: #dfd;
+}
+
+.hljs-emphasis {
+    font-style: italic;
+}
+
+.hljs-strong {
+    font-weight: bold;
+}
diff --git a/ext_conf_template.txt b/ext_conf_template.txt
@@ -0,0 +1,2 @@
+# cat=Backend; type=string; label=CSS file for backend preview
+backendPreviewStyles = EXT:codeblock/Resources/Public/Styles/GitHub.css
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		# cat=Backend; type=string; label=CSS file for backend preview
		backendPreviewStyles = EXT:codeblock/Resources/Public/Styles/GitHub.css