Fix focus class not being added to pre element in CommonMark adapter (#108)

Author: ryangjchandler

docs/commonmark.mdx

@@ -89,12 +89,12 @@ pre.phiki code .line.highlight {
     background-color: hsl(197, 88%, 94%);
 }
 
-.shiki.focus .line:not(.focus) {
+pre.phiki.focus .line:not(.focus) {
     transition: all 250ms;
     filter: blur(2px);
 }
 
-.shiki.focus:hover .line {
+pre.phiki.focus:hover .line {
     transition: all 250ms;
     filter: blur(0);
 }

src/Adapters/CommonMark/Transformers/MetaTransformer.php

@@ -19,6 +19,15 @@ public function preprocess(string $code): string
         return $code;
     }
 
+    public function pre(Element $pre): Element
+    {
+        if ($this->focuses !== []) {
+            $pre->properties->get('class')->add('focus');
+        }
+
+        return $pre;
+    }
+
     public function line(Element $span, array $tokens, int $index): Element
     {
         if (in_array($index + 1, $this->highlights, true)) {

tests/Adapters/CommonMark/Transformers/MetaTransformerTest.php

@@ -54,7 +54,8 @@ function b() {}
     ```
     MD);
 
-    expect($output)->toContain('<span class="line focus">');
+
+    expect($output)->toContain('<pre class="phiki language-php github-light focus"')->toContain('<span class="line focus">');
 });
 
 it('can focus a range of lines', function () {