From bf807a0f4481a0cba6cd426e705e288e9791ea60 Mon Sep 17 00:00:00 2001
From: Georg Ringer <georg.ringer@gmail.com>
Date: Wed, 16 Sep 2020 20:40:57 +0200
Subject: [PATCH] [FEATURE] Use codehighlighting in backend preview

Use the codehighlighting also in the backend preview

Resolves: #2
---
 Classes/Hooks/CodeblockPreviewRenderer.php | 49 ++++++++++--
 Resources/Public/Styles/GitHub.css         | 93 ++++++++++++++++++++++
 ext_conf_template.txt                      |  2 +
 3 files changed, 138 insertions(+), 6 deletions(-)
 create mode 100644 Resources/Public/Styles/GitHub.css
 create mode 100644 ext_conf_template.txt

diff --git a/Classes/Hooks/CodeblockPreviewRenderer.php b/Classes/Hooks/CodeblockPreviewRenderer.php
index 449321d..88ab0b5 100644
--- 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/Resources/Public/Styles/GitHub.css b/Resources/Public/Styles/GitHub.css
new file mode 100644
index 0000000..3d75702
--- /dev/null
+++ 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
new file mode 100644
index 0000000..df2e626
--- /dev/null
+++ 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