feat(plugin): ShikiCodeblocks (#267)

Co-authored-by: ArjixWasTaken <53124886+ArjixWasTaken@users.noreply.github.com>
Co-authored-by: Ven <vendicated@riseup.net>

src/plugins/shikiCodeblocks/style.css

@@ -0,0 +1,100 @@
+.shiki-root {
+    border-radius: 4px;
+}
+
+.shiki-root code {
+    display: block;
+    overflow-x: auto;
+    padding: 0.5em;
+    position: relative;
+
+    font-size: 0.875rem;
+    line-height: 1.125rem;
+    text-indent: 0;
+    white-space: pre-wrap;
+    background: transparent;
+    border: none;
+}
+
+.shiki-root [class^='devicon-'],
+.shiki-root [class*=' devicon-'] {
+    margin-right: 8px;
+    user-select: none;
+}
+
+.shiki-plain code {
+    padding-top: 8px;
+}
+
+.shiki-btns {
+    font-size: 1em;
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    opacity: 0;
+}
+
+.shiki-root:hover .shiki-btns {
+    opacity: 1;
+}
+
+.shiki-btn {
+    border-radius: 4px 4px 0 0;
+    padding: 4px 8px;
+}
+
+.shiki-btn~.shiki-btn {
+    margin-left: 4px;
+}
+
+.shiki-btn:last-child {
+    border-radius: 4px 0;
+}
+
+.shiki-spinner-container {
+    align-items: center;
+    background-color: rgba(0, 0, 0, 0.6);
+    display: flex;
+    position: absolute;
+    justify-content: center;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+}
+
+.shiki-preview {
+    margin-bottom: 2em;
+}
+
+.shiki-lang {
+    padding: 0 5px;
+    margin-bottom: 6px;
+    font-weight: bold;
+    text-transform: capitalize;
+    display: flex;
+    align-items: center;
+}
+
+.shiki-table {
+    border-collapse: collapse;
+    width: 100%;
+}
+
+.shiki-table tr {
+    height: 19px;
+    width: 100%;
+}
+
+.shiki-root td:first-child {
+    border-right: 1px solid transparent;
+    padding-left: 5px;
+    padding-right: 8px;
+    user-select: none;
+}
+
+.shiki-root td:last-child {
+    padding-left: 8px;
+    word-break: break-word;
+    width: 100%;
+}