add some styling

docs/src/components/Demo/index.vue

@@ -16,7 +16,8 @@
           </button>
         </div>
         <div class="demo__code" v-if="activeFile" :key="activeFile.path">
-          <prism :code="activeFile.content" :language="activeFile.highlight" :highlight="highlight" />
+          <!-- eslint-disable-next-line -->
+          <prism :language="activeFile.highlight" :highlight="highlight">{{ activeFile.content }}</prism>
         </div>
       </div>
       <div class="demo__meta">

docs/src/components/FeatureItem/index.vue

@@ -0,0 +1,22 @@
+<template>
+  <div class="feature-item text">
+    <slot />
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.feature-item {
+  break-inside: avoid-column;
+  background-color: rgba($colorBlack, 0.03);
+  border-radius: 0.75rem;
+  padding: 1.5rem;
+  margin-bottom: 1rem;
+}
+</style>

docs/src/components/FeatureList/index.vue

@@ -0,0 +1,19 @@
+<template>
+  <div class="feature-list">
+    <slot />
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.feature-list {
+  column-count: 2;
+  column-gap: 1rem;
+}
+</style>

docs/src/components/Prism/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <pre :class="`language-${language}`" :data-line="highlight"><code :class="`language-${language}`">{{ code }}</code></pre>
+  <pre :class="`language-${language}`" :data-line="highlight"><code :class="`language-${language}`"><slot /></code></pre>
 </template>
 
 <script>
@@ -14,11 +14,6 @@ export default {
       type: String,
     },
 
-    code: {
-      default: null,
-      type: String,
-    },
-
     highlight: {
       type: String,
       default: null,