markdown

app/Http/Livewire/News/InternArticleView.php

@@ -6,9 +6,11 @@ use App\Models\LibraryItem;
 use App\Traits\LNBitsTrait;
 use Carbon\Carbon;
 use Illuminate\Support\Facades\Log;
+use League\CommonMark\Extension\CommonMark\CommonMarkCoreExtension;
 use Livewire\Component;
 use RalphJSmit\Laravel\SEO\Support\SEOData;
 use SimpleSoftwareIO\QrCode\Facades\QrCode;
+use Spatie\CommonMarkShikiHighlighter\HighlightCodeExtension;
 use WireUi\Traits\Actions;
 
 class InternArticleView extends Component
@@ -46,19 +48,19 @@ class InternArticleView extends Component
         }
         if ($this->libraryItem->lecturer->paynym) {
             $this->payNymQrCode = base64_encode(QrCode::format('png')
-                                                     ->size(300)
-                                                     ->merge($this->libraryItem->lecturer->getFirstMedia('avatar')
-                                                         ? str(
-                                                             $this->libraryItem
-                                                                 ->lecturer
-                                                                 ->getFirstMediaPath('avatar'))
-                                                             ->replace('/home/einundzwanzig/portal.einundzwanzig.space',
-                                                                 ''
-                                                             )
-                                                         : '/public/img/einundzwanzig.png',
-                                                         .3)
-                                                     ->errorCorrection('H')
-                                                     ->generate($this->libraryItem->lecturer->paynym));
+                                                      ->size(300)
+                                                      ->merge($this->libraryItem->lecturer->getFirstMedia('avatar')
+                                                          ? str(
+                                                              $this->libraryItem
+                                                                  ->lecturer
+                                                                  ->getFirstMediaPath('avatar'))
+                                                              ->replace('/home/einundzwanzig/portal.einundzwanzig.space',
+                                                                  ''
+                                                              )
+                                                          : '/public/img/einundzwanzig.png',
+                                                          .3)
+                                                      ->errorCorrection('H')
+                                                      ->generate($this->libraryItem->lecturer->paynym));
         }
     }
 
@@ -123,14 +125,16 @@ class InternArticleView extends Component
     public function render()
     {
         $markdown = app(\Spatie\LaravelMarkdown\MarkdownRenderer::class)
-            ->highlightTheme('github-dark')
+            ->addExtension(new CommonMarkCoreExtension())
+            ->addExtension(new HighlightCodeExtension('github-dark'))
             ->toHtml($this->libraryItem->value);
         $markdownPaid = app(\Spatie\LaravelMarkdown\MarkdownRenderer::class)
-            ->highlightTheme('github-dark')
+            ->addExtension(new CommonMarkCoreExtension())
+            ->addExtension(new HighlightCodeExtension('github-dark'))
             ->toHtml($this->libraryItem->value_to_be_paid);
 
         return view('livewire.news.intern-article-view', [
-            'markdown' => $markdown,
+            'markdown'     => $markdown,
             'markdownPaid' => $markdownPaid,
         ])->layout('layouts.app', [
             'SEOData' => new SEOData(

composer.json

@@ -41,6 +41,7 @@
         "sentry/sentry-laravel": "^3.2",
         "simplesoftwareio/simple-qrcode": "^4.2",
         "simplito/elliptic-php": "^1.0",
+        "spatie/commonmark-shiki-highlighter": "^2.1",
         "spatie/eloquent-sortable": "^4.0",
         "spatie/icalendar-generator": "^2.5",
         "spatie/laravel-ciphersweet": "^1.0",

composer.lock

@@ -4,7 +4,7 @@
         "Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies",
         "This file is @generated automatically"
     ],
-    "content-hash": "471af56992a63a07d0e7097c14ef9c30",
+    "content-hash": "07fa7a3b9d1380a7e43243241a7cfda3",
     "packages": [
         {
             "name": "akuechler/laravel-geoly",

resources/views/layouts/styles.blade.php

@@ -1,4 +1,29 @@
 <style>
+    .shiki .highlight {
+        background-color: hsl(197, 88%, 94%);
+        padding: 3px 0;
+    }
+
+    .shiki .add {
+        background-color: hsl(136, 100%, 96%);
+        padding: 3px 0;
+    }
+
+    .shiki .del {
+        background-color: hsl(354, 100%, 96%);
+        padding: 3px 0;
+    }
+
+    .shiki.focus .line:not(.focus) {
+        transition: all 250ms;
+        filter: blur(2px);
+    }
+
+    .shiki.focus:hover .line {
+        transition: all 250ms;
+        filter: blur(0);
+    }
+
     .comments {
         --comments-color-background: rgb(34, 34, 34);
         --comments-color-background: rgb(34, 34, 34);