Revert "DARK: remove code component (#217)"

This reverts commit dcad054.

packages/vue3/package.json

@@ -65,7 +65,9 @@
     "@tiptap/pm": "2.0.0-beta.210",
     "@tiptap/starter-kit": "2.0.0-beta.210",
     "@tiptap/vue-3": "2.0.0-beta.210",
-    "vue-slicksort": "^2.0.5"
+    "vue-slicksort": "^2.0.5",
+    "@types/prismjs": "^1.26.3",
+    "prismjs": "^1.29.0"
   },
   "devDependencies": {
     "@iconify-json/line-md": "^1.1.20",

packages/vue3/src/components/Code/Code.vue

@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import { onMounted, ref } from 'vue';
+import Prism from 'prismjs';
+import './themes/dark.css';
+import './themes/line-numbers.css';
+import './languages';
+import 'prismjs/plugins/line-numbers/prism-line-numbers.js';
+
+import type { Language } from './types';
+
+const props = withDefaults(defineProps<{
+  code?: string
+  language?: Language
+  showLineNumbers?: boolean
+}>(), {
+  code: 'const data = 1;',
+  language: 'js',
+  showLineNumbers: true,
+});
+
+const codeRef = ref();
+
+onMounted(() => {
+  if (codeRef.value) {
+    codeRef.value.innerHTML = codeRef.value.innerHTML.trim();
+    Prism.highlightAll();
+  }
+});
+</script>
+
+<template>
+  <div>
+    <pre :class="[`language-${props.language}`, { 'line-numbers': props.showLineNumbers }]">
+      <code ref="codeRef">{{ code }}</code>
+    </pre>
+  </div>
+</template>
+
+<style scoped>
+pre code[ref="codeRef"] {
+  white-space: pre-line;
+}
+</style>

packages/vue3/src/components/Code/languages/index.ts

@@ -0,0 +1,4 @@
+import 'prismjs/components/prism-typescript';
+import 'prismjs/components/prism-git';
+import 'prismjs/components/prism-scss';
+import 'prismjs/components/prism-markdown';

packages/vue3/src/components/Code/themes/dark.css

@@ -0,0 +1,201 @@
+/**
+* Shades of Purple Theme for Prism.js
+*
+* @author Ahmad Awais <https://twitter.com/MrAhmadAwais/>
+* @support Follow/tweet at https://twitter.com/MrAhmadAwais/
+*/
+
+code[class*='language-'],
+pre[class*='language-'] {
+    color: #9efeff;
+    direction: ltr;
+    text-align: left;
+    white-space: pre;
+    word-spacing: normal;
+    word-break: normal;
+
+    -moz-tab-size: 4;
+    -o-tab-size: 4;
+    tab-size: 4;
+
+    -webkit-hyphens: none;
+    -moz-hyphens: none;
+    -ms-hyphens: none;
+    hyphens: none;
+
+    font-family: 'Operator Mono', 'Fira Code', Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
+    font-weight: 400;
+    font-size: 17px;
+    line-height: 25px;
+    letter-spacing: 0.5px;
+    text-shadow: 0 1px #222245;
+    border-radius: 8px
+}
+pre[class*='language-']{
+white-space: normal;
+}
+pre[class*='language-']::-moz-selection,
+pre[class*='language-'] ::-moz-selection,
+code[class*='language-']::-moz-selection,
+code[class*='language-'] ::-moz-selection,
+pre[class*='language-']::selection,
+pre[class*='language-'] ::selection,
+code[class*='language-']::selection,
+code[class*='language-'] ::selection {
+    color: inherit;
+    background: #a599e9;
+}
+
+/* Code blocks. */
+pre[class*='language-'] {
+    padding: 1.5em;
+    margin: 0;
+    overflow: auto;
+    box-sizing: border-box;
+    max-width: 100%;
+}
+
+:not(pre) > code[class*='language-'],
+pre[class*='language-'] {
+    background: #1e1e3f;
+}
+
+/* Inline code */
+:not(pre) > code[class*='language-'] {
+    padding: 0.1em;
+    border-radius: 0.3em;
+}
+
+.token {
+    font-weight: 400;
+}
+
+.token.comment,
+.token.prolog,
+.token.cdata {
+    color: #b362ff;
+}
+
+.token.delimiter,
+.token.keyword,
+.token.selector,
+.token.important,
+.token.atrule {
+    color: #ff9d00;
+}
+
+.token.operator,
+.token.attr-name {
+    color: rgb(255, 180, 84);
+}
+
+.token.punctuation {
+    color: #ffffff;
+}
+
+.token.boolean {
+    color: rgb(255, 98, 140);
+}
+
+.token.tag,
+.token.tag .punctuation,
+.token.doctype,
+.token.builtin {
+    color: rgb(255, 157, 0);
+}
+
+.token.entity,
+.token.symbol {
+    color: #6897bb;
+}
+
+.token.number {
+    color: #ff628c;
+}
+
+.token.property,
+.token.constant,
+.token.variable {
+    color: #ff628c;
+}
+
+.token.string,
+.token.char {
+    color: #a5ff90;
+}
+
+.token.attr-value,
+.token.attr-value .punctuation {
+    color: #a5c261;
+}
+
+.token.attr-value .punctuation:first-child {
+    color: #a9b7c6;
+}
+
+.token.url {
+    color: #287bde;
+    text-decoration: underline;
+}
+
+.token.function {
+    color: rgb(250, 208, 0);
+}
+
+.token.regex {
+    background: #364135;
+}
+
+.token.bold {
+    font-weight: bold;
+}
+
+.token.italic {
+    font-style: italic;
+}
+
+.token.inserted {
+    background: #00ff00;
+}
+
+.token.deleted {
+    background: #ff000d;
+}
+
+code.language-css .token.property,
+code.language-css .token.property + .token.punctuation {
+    color: #a9b7c6;
+}
+
+code.language-css .token.id {
+    color: #ffc66d;
+}
+
+code.language-css .token.selector > .token.class,
+code.language-css .token.selector > .token.attribute,
+code.language-css .token.selector > .token.pseudo-class,
+code.language-css .token.selector > .token.pseudo-element {
+    color: #ffc66d;
+}
+
+.token.class-name {
+    color: #fb94ff;
+}
+
+.token.operator,
+.token.entity,
+.token.url,
+.language-css .token.string,
+.style .token.string {
+    background: none;
+}
+
+.line-highlight.line-highlight {
+    margin-top: 36px;
+    background: linear-gradient(to right, rgba(179, 98, 255, 0.17), transparent);
+}
+
+.line-highlight.line-highlight:before,
+.line-highlight.line-highlight[data-end]:after {
+    content: '';
+}

packages/vue3/src/components/Code/themes/line-numbers.css

@@ -0,0 +1,38 @@
+pre[class*="language-"].line-numbers {
+    position: relative;
+    padding-left: 3.8em;
+    counter-reset: linenumber;
+  }
+
+pre[class*="language-"].line-numbers > code {
+  position: relative;
+  display: block
+}
+
+.line-numbers .line-numbers-rows {
+  position: absolute;
+  top: 0;
+  left: -3.8em;
+  width: 3em; /* works for line-numbers below 1000 lines */
+  border-right: 1px solid #999;
+  font-size: 100%;
+  letter-spacing: -1px;
+  pointer-events: none;
+  user-select: none;
+  user-select: none;
+  user-select: none;
+  user-select: none;
+}
+
+.line-numbers-rows > span {
+  display: block;
+  counter-increment: linenumber;
+}
+
+.line-numbers-rows > span::before {
+  content: counter(linenumber);
+  display: block;
+  padding-right: 0.8em;
+  color: #999;
+  text-align: right;
+}

packages/vue3/src/components/Code/types.ts

@@ -0,0 +1 @@
+export type Language = 'scss' | 'css' | 'html' | 'markdown' | 'md' | 'typescript' | 'ts' | 'git' | 'javascript' | 'js' | 'markup';

packages/vue3/src/components/index.ts

@@ -56,6 +56,7 @@ export { default as Slider } from './Slider/Slider.vue';
 export { default as Modal } from './Modal/Modal.vue';
 export { default as ResourcePicker } from './ResourcePicker/ResourcePicker.vue';
 export { default as Popover } from './Popover/Popover.vue';
+export { default as Code } from './Code/Code.vue';
 export { default as Divider } from './Divider/Divider.vue';
 export { default as Skeleton } from './Skeleton/Skeleton.vue';
 export { default as Spinner } from './Spinner/Spinner.vue';