refactor(components): rewrite Code component and usePrism hook

* move Prism styles to Sass placeholders to avoid repeats
* let usePrism consumer define its plugins (remove default ones)
* remove `plugins` prop from Code component
* add new props to Code component to let consumer configure plugins
(and handle plugin list from the given options)

However there are some problems with Prism plugins: line-highlight and
treeview does not seems to be loaded. I don't want to use Babel instead
of SWC so I have no solution for now.

3 files changed, 18 insertions, 11 deletions

diff --git a/src/styles/abstracts/_placeholders.scss b/src/styles/abstracts/_placeholders.scss
index 04522d7..4070730 100644
--- a/src/styles/abstracts/_placeholders.scss
+++ b/src/styles/abstracts/_placeholders.scss
@@ -5,3 +5,4 @@
 @forward "./placeholders/layout";
 @forward "./placeholders/links";
 @forward "./placeholders/lists";
+@forward "./placeholders/prism";
diff --git a/src/styles/pages/partials/_article-prism.scss b/src/styles/abstracts/placeholders/_prism.scss
index 7d23e38..97f28b6 100644
--- a/src/styles/pages/partials/_article-prism.scss
+++ b/src/styles/abstracts/placeholders/_prism.scss
@@ -1,7 +1,7 @@
-@use "../../abstracts/functions" as fun;
-@use "../../abstracts/mixins" as mix;
+@use "../functions" as fun;
+@use "../mixins" as mix;
 
-@mixin styles {
+%prism {
   .code-toolbar {
     --toolbar-height: #{fun.convert-px(100)};
 
@@ -63,8 +63,8 @@
     background: var(--color-bg);
     border: 0.4ex solid var(--color-primary);
     border-radius: fun.convert-px(30);
-    box-shadow: fun.convert-px(1) fun.convert-px(1) fun.convert-px(1)
-        var(--color-shadow),
+    box-shadow:
+      fun.convert-px(1) fun.convert-px(1) fun.convert-px(1) var(--color-shadow),
       fun.convert-px(1) fun.convert-px(2) fun.convert-px(2) fun.convert-px(-2)
         var(--color-shadow),
       fun.convert-px(3) fun.convert-px(4) fun.convert-px(5) fun.convert-px(-4)
@@ -78,7 +78,8 @@
     &:focus {
       transform: translateX(#{fun.convert-px(-2)})
         translateY(#{fun.convert-px(-2)});
-      box-shadow: fun.convert-px(1) fun.convert-px(1) fun.convert-px(1)
+      box-shadow:
+        fun.convert-px(1) fun.convert-px(1) fun.convert-px(1)
           var(--color-shadow-light),
         fun.convert-px(1) fun.convert-px(2) fun.convert-px(2) fun.convert-px(-2)
           var(--color-shadow-light),
@@ -105,7 +106,9 @@
     padding: 0;
     position: relative;
     overflow: auto;
+    background: var(--color-bg-secondary);
     border: fun.convert-px(1) solid var(--color-border-light);
+    color: var(--color-fg);
     hyphens: none;
     tab-size: 4;
     text-align: left;
@@ -122,7 +125,7 @@
     &.line-numbers {
       --gutter-size: 6ch;
 
-      counter-reset: lineNumber;
+      counter-reset: linenumber;
       padding-left: var(--gutter-size-with-spacing);
     }
 
@@ -183,10 +186,10 @@
 
     .line-numbers-rows {
       > span {
-        counter-increment: lineNumber;
+        counter-increment: linenumber;
 
         &::before {
-          content: counter(lineNumber);
+          content: counter(linenumber);
         }
       }
     }
@@ -271,6 +274,10 @@
         background: var(--color-bg);
         outline: solid fun.convert-px(1) var(--color-primary-light);
       }
+
+      &.output {
+        user-select: none;
+      }
     }
 
     span.inline-color-wrapper {
diff --git a/src/styles/pages/article.module.scss b/src/styles/pages/article.module.scss
index d2e7822..5e7d520 100644
--- a/src/styles/pages/article.module.scss
+++ b/src/styles/pages/article.module.scss
@@ -5,7 +5,6 @@
 @use "partials/article-links";
 @use "partials/article-lists";
 @use "partials/article-media";
-@use "partials/article-prism";
 @use "partials/article-wp-blocks";
 
 .btn {
@@ -23,8 +22,8 @@
     @include article-links.styles;
     @include article-lists.styles;
     @include article-media.styles;
-    @include article-prism.styles;
     @include article-wp-blocks.styles;
+    @extend %prism;
   }
 }