From 024dfa5870d9e7dd36f533dcb06898e9bc50a641 Mon Sep 17 00:00:00 2001
From: Anton Reshetov <reshetov.art@gmail.com>
Date: Fri, 8 Jul 2022 16:26:15 +0300
Subject: [PATCH] feat(snippets): create screenshot of snippets (#115)

---
 package.json                                  |   1 +
 pnpm-lock.yaml                                |  58 +++-
 src/main/store/module/preferences.ts          |   6 +
 src/renderer/App.vue                          |   1 +
 .../screenshot/ScreenshotPalette.vue          |  70 ++++
 .../components/screenshot/TheScreenshot.vue   | 328 ++++++++++++++++++
 .../components/snippets/SnippetHeader.vue     |  12 +-
 .../components/snippets/SnippetsView.vue      |  14 +-
 src/renderer/components/ui/AppCheckbox.vue    |   5 +
 src/renderer/composable/index.ts              |  23 ++
 src/renderer/store/app.ts                     |  13 +
 src/renderer/store/snippets.ts                |   3 +-
 src/shared/types/main/store.d.ts              |   3 +-
 src/shared/types/renderer/store/app.d.ts      |   8 +
 src/shared/types/renderer/store/snippets.d.ts |   1 +
 15 files changed, 528 insertions(+), 18 deletions(-)
 create mode 100644 src/renderer/components/screenshot/ScreenshotPalette.vue
 create mode 100644 src/renderer/components/screenshot/TheScreenshot.vue

diff --git a/package.json b/package.json
index b14ab819..542172d2 100644
--- a/package.json
+++ b/package.json
@@ -45,6 +45,7 @@
     "electron-store": "^8.0.1",
     "fs-extra": "^10.0.1",
     "highlight.js": "^11.5.1",
+    "html2canvas": "^1.4.1",
     "interactjs": "^1.10.11",
     "lodash": "^4.17.21",
     "lowdb": "^3.0.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index af157497..9f502d9e 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -45,6 +45,7 @@ specifiers:
   eslint-plugin-vue: ^8.2.0
   fs-extra: ^10.0.1
   highlight.js: ^11.5.1
+  html2canvas: ^1.4.1
   husky: ^7.0.0
   interactjs: ^1.10.11
   lint-staged: ^12.1.4
@@ -90,6 +91,7 @@ dependencies:
   electron-store: 8.0.1
   fs-extra: 10.0.1
   highlight.js: 11.5.1
+  html2canvas: 1.4.1
   interactjs: 1.10.11
   lodash: 4.17.21
   lowdb: 3.0.0
@@ -3639,6 +3641,11 @@ packages:
       pascalcase: 0.1.1
     dev: true
 
+  /base64-arraybuffer/1.0.2:
+    resolution: {integrity: sha512-I3yl4r9QB5ZRY3XuJVEPfc2XhZO6YweFPI+UovAzn+8/hb3oJ6lnysaFcjVpkCPfVWFUDvoZ8kmVDP7WyRtYtQ==}
+    engines: {node: '>= 0.6.0'}
+    dev: false
+
   /base64-js/1.5.1:
     resolution: {integrity: sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==}
     dev: true
@@ -4452,7 +4459,7 @@ packages:
     engines: {node: '>=8'}
     dependencies:
       dot-prop: 5.3.0
-      graceful-fs: 4.2.9
+      graceful-fs: 4.2.10
       make-dir: 3.1.0
       unique-string: 2.0.0
       write-file-atomic: 3.0.3
@@ -4646,6 +4653,12 @@ packages:
       timsort: 0.3.0
     dev: false
 
+  /css-line-break/2.1.0:
+    resolution: {integrity: sha512-FHcKFCZcAha3LwfVBhCQbW2nCNbkZXn7KVUJcsT5/P8YmfsVja0FMPJr0B903j/E69HUphKiV9iQArX8SDYA4w==}
+    dependencies:
+      utrie: 1.0.2
+    dev: false
+
   /css-select-base-adapter/0.1.1:
     resolution: {integrity: sha512-jQVeeRG70QI08vSTwf1jHxp74JoZsr2XSgETae8/xC8ovSnL2WF87GTLO86Sbwdt2lK4Umg4HnnwMO4YF3Ce7w==}
     dev: false
@@ -5440,7 +5453,7 @@ packages:
       decompress-tarbz2: 4.1.1
       decompress-targz: 4.1.1
       decompress-unzip: 4.0.1
-      graceful-fs: 4.2.9
+      graceful-fs: 4.2.10
       make-dir: 1.3.0
       pify: 2.3.0
       strip-dirs: 2.1.0
@@ -5926,7 +5939,7 @@ packages:
     resolution: {integrity: sha1-TW5omzcl+GCQknzMhs2fFjW4ni4=}
     engines: {node: '>=0.6'}
     dependencies:
-      graceful-fs: 4.2.9
+      graceful-fs: 4.2.10
       memory-fs: 0.2.0
       tapable: 0.1.10
     dev: true
@@ -7171,7 +7184,7 @@ packages:
     resolution: {integrity: sha512-yhlQgA6mnOJUKOsRUFsgJdQCvkKhcz8tlZG5HBQfReYZy46OwLcY+Zia0mtdHsOo9y/hP+CxMN0TU9QxoOtG4g==}
     engines: {node: '>=6 <7 || >=8'}
     dependencies:
-      graceful-fs: 4.2.9
+      graceful-fs: 4.2.10
       jsonfile: 4.0.0
       universalify: 0.1.2
     dev: true
@@ -7217,7 +7230,7 @@ packages:
     resolution: {integrity: sha512-WvJ193OHa0GHPEL+AycEJgxvBEwyfRkN1vhjca23OaPVMCaLCXTd5qAu82AjTcgP1UJmytkOKb63Ypde7raDIg==}
     engines: {node: '>=0.6'}
     dependencies:
-      graceful-fs: 4.2.9
+      graceful-fs: 4.2.10
       inherits: 2.0.4
       mkdirp: 0.5.5
       rimraf: 2.7.1
@@ -7515,7 +7528,6 @@ packages:
 
   /graceful-fs/4.2.10:
     resolution: {integrity: sha512-9ByhssR2fPVsNZj478qUUbKfmL0+t5BDVyjShtyZZLiK7ZDAArFFfopyOTj0M05wE2tJPisA4iTnnXl2YoPvOA==}
-    dev: true
 
   /graceful-fs/4.2.9:
     resolution: {integrity: sha512-NtNxqUcXgpW2iMrfqSfR73Glt39K+BLwWsPs94yR63v45T0Wbej7eRmL5cWfwEgqXnmjQp3zaJTshdRW/qC2ZQ==}
@@ -7745,6 +7757,14 @@ packages:
     resolution: {integrity: sha1-wc56MWjIxmFAM6S194d/OyJfnDg=}
     dev: false
 
+  /html2canvas/1.4.1:
+    resolution: {integrity: sha512-fPU6BHNpsyIhr8yyMpTLLxAbkaK8ArIBcmZIRiBLiDhjeqvXolaEmDGmELFuX9I4xDcaKKcJl+TKZLqruBbmWA==}
+    engines: {node: '>=8.0.0'}
+    dependencies:
+      css-line-break: 2.1.0
+      text-segmentation: 1.0.3
+    dev: false
+
   /htmlparser2/6.1.0:
     resolution: {integrity: sha512-gyyPk6rgonLFEDGoeRgQNaEUvdJ4ktTmmUh/h2t7s+M8oPpIPxgNACWa+6ESR57kXstwqPiCut0V8NRpcwgU7A==}
     dependencies:
@@ -8461,7 +8481,7 @@ packages:
       babel-core: 7.0.0-bridge.0_@babel+core@7.16.5
       colors: 1.4.0
       flow-parser: 0.168.0
-      graceful-fs: 4.2.9
+      graceful-fs: 4.2.10
       micromatch: 3.1.10
       neo-async: 2.6.2
       node-dir: 0.1.17
@@ -8555,7 +8575,7 @@ packages:
   /jsonfile/4.0.0:
     resolution: {integrity: sha1-h3Gq4HmbZAdrdmQPygWPnBDjPss=}
     optionalDependencies:
-      graceful-fs: 4.2.9
+      graceful-fs: 4.2.10
     dev: true
 
   /jsonfile/6.1.0:
@@ -8563,7 +8583,7 @@ packages:
     dependencies:
       universalify: 2.0.0
     optionalDependencies:
-      graceful-fs: 4.2.9
+      graceful-fs: 4.2.10
 
   /jsonparse/1.3.1:
     resolution: {integrity: sha1-P02uSpH6wxX3EGL4UhzCOfE2YoA=}
@@ -8726,7 +8746,7 @@ packages:
     resolution: {integrity: sha1-L19Fq5HjMhYjT9U62rZo607AmTs=}
     engines: {node: '>=4'}
     dependencies:
-      graceful-fs: 4.2.9
+      graceful-fs: 4.2.10
       parse-json: 4.0.0
       pify: 3.0.0
       strip-bom: 3.0.0
@@ -11565,7 +11585,7 @@ packages:
   /steno/0.4.4:
     resolution: {integrity: sha1-BxEFvfwobmYVwEA8J+nXtdy4Vcs=}
     dependencies:
-      graceful-fs: 4.2.9
+      graceful-fs: 4.2.10
 
   /steno/2.1.0:
     resolution: {integrity: sha512-mauOsiaqTNGFkWqIfwcm3y/fq+qKKaIWf1vf3ocOuTdco9XoHCO2AGF1gFYXuZFSWuP38Q8LBHBGJv2KnJSXyA==}
@@ -11943,6 +11963,12 @@ packages:
     engines: {node: '>=0.10'}
     dev: true
 
+  /text-segmentation/1.0.3:
+    resolution: {integrity: sha512-iOiPUo/BGnZ6+54OsWxZidGCsdU8YbE4PSpdPinp7DeMtUJNJBoJ/ouUSTJjHkh1KntHaltHl/gDs2FC4i5+Nw==}
+    dependencies:
+      utrie: 1.0.2
+    dev: false
+
   /text-table/0.2.0:
     resolution: {integrity: sha1-f17oI66AUgfACvLfSoTsP8+lcLQ=}
     dev: true
@@ -12475,7 +12501,7 @@ packages:
       buffer-indexof-polyfill: 1.0.2
       duplexer2: 0.1.4
       fstream: 1.0.12
-      graceful-fs: 4.2.9
+      graceful-fs: 4.2.10
       listenercount: 1.0.1
       readable-stream: 2.3.7
       setimmediate: 1.0.5
@@ -12569,6 +12595,12 @@ packages:
     resolution: {integrity: sha1-n5VxD1CiZ5R7LMwSR0HBAoQn5xM=}
     engines: {node: '>= 0.4.0'}
 
+  /utrie/1.0.2:
+    resolution: {integrity: sha512-1MLa5ouZiOmQzUbjbu9VmjLzn1QLXBhwpUa7kdLUQK+KQ5KA9I1vk5U4YHe/X2Ch7PYnJfWuWT+VbuxbGwljhw==}
+    dependencies:
+      base64-arraybuffer: 1.0.2
+    dev: false
+
   /uuid/3.4.0:
     resolution: {integrity: sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==}
     deprecated: Please upgrade  to version 7 or higher.  Older versions may use Math.random() in certain circumstances, which is known to be problematic.  See https://v8.dev/blog/math-random for details.
@@ -13016,7 +13048,7 @@ packages:
   /write-file-atomic/2.4.3:
     resolution: {integrity: sha512-GaETH5wwsX+GcnzhPgKcKjJ6M2Cq3/iZp1WyY/X1CSqrW+jVNM9Y7D8EC2sM4ZG/V8wZlSniJnCKWPmBYAucRQ==}
     dependencies:
-      graceful-fs: 4.2.9
+      graceful-fs: 4.2.10
       imurmurhash: 0.1.4
       signal-exit: 3.0.6
     dev: true
diff --git a/src/main/store/module/preferences.ts b/src/main/store/module/preferences.ts
index 55ecb9aa..29b9d259 100644
--- a/src/main/store/module/preferences.ts
+++ b/src/main/store/module/preferences.ts
@@ -27,6 +27,12 @@ export default new Store<PreferencesStore>({
       theme: 'chrome',
       highlightLine: false,
       highlightGutter: false
+    },
+    screenshot: {
+      background: false,
+      gradient: ['#D02F98', '#9439CA'],
+      darkMode: true,
+      width: 600
     }
   }
 })
diff --git a/src/renderer/App.vue b/src/renderer/App.vue
index 702e1a0a..bb368013 100644
--- a/src/renderer/App.vue
+++ b/src/renderer/App.vue
@@ -57,6 +57,7 @@ const init = () => {
 
   appStore.sizes.sidebar = store.app.get('sidebarWidth')
   appStore.sizes.snippetList = store.app.get('snippetListWidth')
+  appStore.screenshot = store.preferences.get('screenshot')
 
   snippetStore.sort = store.app.get('sort')
 
diff --git a/src/renderer/components/screenshot/ScreenshotPalette.vue b/src/renderer/components/screenshot/ScreenshotPalette.vue
new file mode 100644
index 00000000..1a8bcc31
--- /dev/null
+++ b/src/renderer/components/screenshot/ScreenshotPalette.vue
@@ -0,0 +1,70 @@
+<template>
+  <div class="screenshot-palette">
+    <div
+      v-for="(i, index) in palette"
+      :key="index"
+      class="item"
+      :class="{ 'is-selected': index === selected }"
+      :style="{ backgroundImage: `linear-gradient(45deg, ${i[0]}, ${i[1]})` }"
+      @click="onSelect(i)"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useAppStore } from '@/store/app'
+import { computed } from 'vue'
+
+interface Props {
+  modelValue: [string, string]
+}
+
+interface Emits {
+  (e: 'update:modelValue', value: [string, string]): void
+}
+
+const emit = defineEmits<Emits>()
+
+const props = defineProps<Props>()
+
+const appStore = useAppStore()
+
+const palette: [string, string][] = [
+  ['#D02F98', '#9439CA'],
+  ['#A58EFB', '#CEABF9'],
+  ['#FFE623', '#FFE623'],
+  ['#4169E1', '#4169E1'],
+  ['#FC3CAD', '#FC3CAD'],
+  ['#8E00A7', '#8E00A7']
+]
+
+const selected = computed(() =>
+  palette.findIndex(i => i.every((c, idx) => c === props.modelValue[idx]))
+)
+
+const onSelect = (value: [string, string]) => {
+  emit('update:modelValue', value)
+}
+
+const itemBorderColor = computed(() =>
+  appStore.isLightTheme ? '#fff' : 'var(--color-contrast-high'
+)
+</script>
+
+<style lang="scss" scoped>
+.screenshot-palette {
+  display: flex;
+  gap: var(--spacing-xs);
+  .item {
+    padding: 2px;
+    border: 2px solid v-bind(itemBorderColor);
+    width: 18px;
+    height: 18px;
+    border-radius: 4px;
+    outline: 1px solid var(--color-border);
+    &.is-selected {
+      outline-color: var(--color-primary);
+    }
+  }
+}
+</style>
diff --git a/src/renderer/components/screenshot/TheScreenshot.vue b/src/renderer/components/screenshot/TheScreenshot.vue
new file mode 100644
index 00000000..720395cd
--- /dev/null
+++ b/src/renderer/components/screenshot/TheScreenshot.vue
@@ -0,0 +1,328 @@
+<template>
+  <div class="snippet-screenshot">
+    <div class="tools">
+      <div class="left">
+        <div class="tools__item">
+          <AppCheckbox
+            v-model="appStore.screenshot.background"
+            name="background"
+            label="Background"
+          />
+        </div>
+        <div class="tools__item">
+          <AppCheckbox
+            v-model="appStore.screenshot.darkMode"
+            name="darkMode"
+            label="Dark mode"
+          />
+        </div>
+        <div class="tools__item">
+          <ScreenshotPalette v-model="appStore.screenshot.gradient" />
+        </div>
+      </div>
+      <div class="right">
+        <AppActionButton @click="onSaveScreenshot">
+          <UniconsFileDownload />
+        </AppActionButton>
+      </div>
+    </div>
+    <PerfectScrollbar>
+      <div class="content">
+        <div
+          ref="frameRef"
+          class="frame"
+        >
+          <div
+            ref="snippetRef"
+            class="background"
+            :style="colorBgStyle"
+          >
+            <div class="body">
+              <div class="window-controls">
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  width="54"
+                  height="14"
+                  viewBox="0 0 54 14"
+                >
+                  <g
+                    fill="none"
+                    fill-rule="evenodd"
+                    transform="translate(1 1)"
+                  >
+                    <circle
+                      cx="6"
+                      cy="6"
+                      r="6"
+                      fill="#FF5F56"
+                      stroke="#E0443E"
+                      stroke-width=".5"
+                    />
+                    <circle
+                      cx="26"
+                      cy="6"
+                      r="6"
+                      fill="#FFBD2E"
+                      stroke="#DEA123"
+                      stroke-width=".5"
+                    />
+                    <circle
+                      cx="46"
+                      cy="6"
+                      r="6"
+                      fill="#27C93F"
+                      stroke="#1AAB29"
+                      stroke-width=".5"
+                    />
+                  </g>
+                </svg>
+              </div>
+              <div v-html="renderer" />
+            </div>
+          </div>
+          <div class="transparent" />
+          <div
+            ref="gutterRef"
+            class="gutter"
+          />
+        </div>
+      </div>
+    </PerfectScrollbar>
+    <div
+      ref="previewRef"
+      class="preview"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useAppStore } from '@/store/app'
+import hljs from 'highlight.js'
+import html2canvas from 'html2canvas'
+import interact from 'interactjs'
+import { computed, onMounted, ref, watch } from 'vue'
+import { useHljsTheme } from '@/composable'
+import { store } from '@/electron'
+
+const GUTTER_RIGHT_OFFSET = 10
+const GUTTER_WIDTH = 8
+const MAX_WIDTH = 920
+const MIN_WIDTH = 520
+
+interface Props {
+  snippet: string
+  lang: string
+  name: string
+}
+
+const props = defineProps<Props>()
+
+const appStore = useAppStore()
+
+const frameRef = ref<HTMLElement>()
+const snippetRef = ref<HTMLElement>()
+const previewRef = ref<HTMLElement>()
+const gutterRef = ref<HTMLElement>()
+
+const gutterWidth = ref(GUTTER_WIDTH + 'px')
+const offsetGutterRight = ref(GUTTER_RIGHT_OFFSET + 'px')
+
+const forceRefresh = ref()
+
+const font = computed(() => appStore.editor.fontFamily)
+const frameWidthC = computed(() => appStore.screenshot.width + 'px')
+const transparentOpacity = computed(() =>
+  appStore.isLightTheme ? '75%' : '10%'
+)
+const colorBodyBg = computed(() =>
+  appStore.screenshot.darkMode ? '#263238' : '#fff'
+)
+const colorBgStyle = computed(() => {
+  if (!appStore.screenshot.background) return
+  return {
+    backgroundImage: `linear-gradient(45deg, ${appStore.screenshot.gradient[0]}, ${appStore.screenshot.gradient[1]})`
+  }
+})
+
+const renderer = computed(() => {
+  const language = hljs.getLanguage(props.lang) ? props.lang : 'plaintext'
+  return `<pre><code class="language-${props.lang} hljs">${
+    hljs.highlight(props.snippet, { language }).value
+  }</code></pre>`
+})
+
+const height = computed(() => {
+  // eslint-disable-next-line no-unused-expressions
+  forceRefresh.value
+
+  const result =
+    appStore.sizes.editor.titleHeight +
+    appStore.sizes.titlebar +
+    appStore.sizes.editor.footerHeight
+
+  return window.innerHeight - result + 'px'
+})
+
+const init = () => {
+  hljs.registerAliases('apache_conf', { languageName: 'apache' })
+  hljs.registerAliases('c_cpp', { languageName: 'cpp' })
+  hljs.registerAliases('graphqlschema', { languageName: 'graphql' })
+}
+
+const onSaveScreenshot = async () => {
+  const canvas = await html2canvas(snippetRef.value!, {
+    backgroundColor: null
+  })
+  previewRef.value?.appendChild(canvas)
+
+  const a = document.createElement('a')
+  const img = canvas.toDataURL('image/png')
+
+  a.href = img
+  a.download = `${props.name}.png`
+  a.click()
+  console.log(img)
+}
+
+watch(
+  () => appStore.screenshot.darkMode,
+  v => {
+    if (v) {
+      useHljsTheme('dark')
+    } else {
+      useHljsTheme('light')
+    }
+  },
+  { immediate: true }
+)
+
+watch(
+  () => appStore.screenshot,
+  v => {
+    store.preferences.set('screenshot', JSON.parse(JSON.stringify(v)))
+  },
+  { deep: true }
+)
+
+onMounted(() => {
+  interact(frameRef.value!).resizable({
+    allowFrom: gutterRef.value!,
+    onmove: e => {
+      const { pageX } = e
+      const gutterOffset = GUTTER_RIGHT_OFFSET + GUTTER_WIDTH / 2
+      const width = Math.floor(
+        pageX -
+          appStore.sizes.sidebar -
+          appStore.sizes.snippetList +
+          gutterOffset
+      )
+
+      appStore.screenshot.width = width
+
+      if (width < MIN_WIDTH) {
+        appStore.screenshot.width = 520
+      }
+
+      if (width > MAX_WIDTH) {
+        appStore.screenshot.width = 920
+      }
+    }
+  })
+})
+
+window.addEventListener('resize', () => {
+  forceRefresh.value = Math.random()
+})
+
+init()
+</script>
+
+<style lang="scss" scoped>
+.snippet-screenshot {
+  --color-bg-transparent: hsla(0, 0%, v-bind(transparentOpacity));
+
+  :deep(code) {
+    font-family: v-bind(font) !important;
+  }
+  :deep(pre) {
+    white-space: pre-wrap;
+    font-size: 12px;
+  }
+  :deep(code) {
+    padding: 0;
+  }
+  :deep(.ps) {
+    height: v-bind(height);
+  }
+  .tools {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    padding: 4px var(--spacing-xs);
+    border-top: 1px solid var(--color-border);
+    border-bottom: 1px solid var(--color-border);
+    &__item {
+    }
+    .left {
+      gap: var(--spacing-sm);
+      align-items: center;
+      display: flex;
+    }
+  }
+  .content {
+    flex: 1;
+    display: flex;
+  }
+  .frame {
+    position: relative;
+    width: v-bind(frameWidthC);
+    min-width: 520px;
+    max-width: 920px;
+  }
+
+  .background {
+    position: relative;
+    padding: var(--spacing-lg);
+    z-index: 10;
+  }
+  .transparent {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-image: linear-gradient(
+        45deg,
+        var(--color-bg-transparent) 25%,
+        transparent 0
+      ),
+      linear-gradient(-45deg, var(--color-bg-transparent) 25%, transparent 0),
+      linear-gradient(45deg, transparent 75%, var(--color-bg-transparent) 0),
+      linear-gradient(-45deg, transparent 75%, var(--color-bg-transparent) 0);
+    background-size: 20px 20px;
+    background-position: 0 0, 0 10px, 10px -10px, -10px 0;
+    z-index: 1;
+  }
+
+  .gutter {
+    position: absolute;
+    width: v-bind(gutterWidth);
+    height: 40px;
+    background-color: var(--color-contrast-medium);
+    right: v-bind(offsetGutterRight);
+    border-radius: 10px;
+    top: 50%;
+    transform: translateY(-50%);
+    z-index: 100;
+    cursor: col-resize;
+  }
+
+  .body {
+    padding: var(--spacing-sm);
+    border-radius: 12px;
+    background-color: v-bind(colorBodyBg);
+    user-select: none;
+  }
+}
+</style>
diff --git a/src/renderer/components/snippets/SnippetHeader.vue b/src/renderer/components/snippets/SnippetHeader.vue
index cf6648bc..3b75fbc2 100644
--- a/src/renderer/components/snippets/SnippetHeader.vue
+++ b/src/renderer/components/snippets/SnippetHeader.vue
@@ -17,6 +17,10 @@
           <UniconsEye v-if="!snippetStore.isMarkdownPreview" />
           <UniconsEyeSlash v-else />
         </AppActionButton>
+        <AppActionButton @click="onClickScreenshotPreview">
+          <UniconsCamera v-if="!snippetStore.isScreenshotPreview" />
+          <UniconsCameraSlash v-else />
+        </AppActionButton>
         <AppActionButton @click="onCopySnippet">
           <UniconsArrow />
         </AppActionButton>
@@ -31,7 +35,9 @@
     <div class="bottom">
       <SnippetsDescription v-show="snippetStore.isDescriptionShow" />
       <SnippetFragments v-if="snippetStore.isFragmentsShow" />
-      <SnippetsTags v-if="snippetStore.isTagsShow" />
+      <SnippetsTags
+        v-if="snippetStore.isTagsShow && !snippetStore.isScreenshotPreview"
+      />
     </div>
   </div>
 </template>
@@ -68,6 +74,10 @@ const onClickMarkdownPreview = () => {
   snippetStore.isMarkdownPreview = !snippetStore.isMarkdownPreview
 }
 
+const onClickScreenshotPreview = () => {
+  snippetStore.isScreenshotPreview = !snippetStore.isScreenshotPreview
+}
+
 emitter.on('snippet:focus-name', () => {
   inputRef.value?.select()
 })
diff --git a/src/renderer/components/snippets/SnippetsView.vue b/src/renderer/components/snippets/SnippetsView.vue
index 75db202b..88e35941 100644
--- a/src/renderer/components/snippets/SnippetsView.vue
+++ b/src/renderer/components/snippets/SnippetsView.vue
@@ -8,7 +8,9 @@
     <template v-if="snippetStore.selected">
       <SnippetHeader />
       <TheEditor
-        v-if="!snippetStore.isMarkdownPreview"
+        v-if="
+          !snippetStore.isMarkdownPreview && !snippetStore.isScreenshotPreview
+        "
         v-model="snippet"
         v-model:lang="lang"
         :snippet-id="snippetStore.selectedId!"
@@ -17,9 +19,17 @@
         :fragments="snippetStore.isFragmentsShow"
       />
       <TheMarkdown
-        v-else
+        v-if="
+          snippetStore.isMarkdownPreview && !snippetStore.isScreenshotPreview
+        "
         :value="snippetStore.currentContent!"
       />
+      <TheScreenshot
+        v-if="snippetStore.isScreenshotPreview"
+        :snippet="snippet"
+        :lang="lang"
+        :name="snippetStore.selected?.name"
+      />
     </template>
     <div
       v-else-if="isShowPlaceholder"
diff --git a/src/renderer/components/ui/AppCheckbox.vue b/src/renderer/components/ui/AppCheckbox.vue
index 7a076848..effe32fe 100644
--- a/src/renderer/components/ui/AppCheckbox.vue
+++ b/src/renderer/components/ui/AppCheckbox.vue
@@ -43,6 +43,11 @@ const onChange = () => {
 
 <style lang="scss" scoped>
 .app-checkbox {
+  label {
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-xs);
+  }
   input {
     display: none;
   }
diff --git a/src/renderer/composable/index.ts b/src/renderer/composable/index.ts
index cdad3d2a..1232a96e 100644
--- a/src/renderer/composable/index.ts
+++ b/src/renderer/composable/index.ts
@@ -7,6 +7,7 @@ import { useSnippetStore } from '@/store/snippets'
 import { ipc, track } from '@/electron'
 import type { NotificationRequest } from '@shared/types/main'
 import type { Snippet, SnippetsSort } from '@shared/types/main/db'
+import { useAppStore } from '@/store/app'
 
 export const useApi = createFetch({
   baseUrl: `http://localhost:${API_PORT}`
@@ -108,3 +109,25 @@ export const sortSnippetsBy = (snippets: Snippet[], sort: SnippetsSort) => {
     )
   }
 }
+
+export const useHljsTheme = async (theme: 'dark' | 'light') => {
+  const { default: darkCSS } = await import(
+    'highlight.js/styles/base16/material.css?raw'
+  )
+  const { default: lightCSS } = await import(
+    'highlight.js/styles/github.css?raw'
+  )
+
+  document.querySelector('[data=hljs-theme]')?.remove()
+
+  const style = document.createElement('style')
+  style.setAttribute('data', 'hljs-theme')
+
+  if (theme === 'dark') {
+    style.innerHTML = darkCSS
+  } else {
+    style.innerHTML = lightCSS
+  }
+
+  document.head.appendChild(style)
+}
diff --git a/src/renderer/store/app.ts b/src/renderer/store/app.ts
index 040266a9..5d7953fa 100644
--- a/src/renderer/store/app.ts
+++ b/src/renderer/store/app.ts
@@ -1,6 +1,7 @@
 import { platform, store } from '@/electron'
 import type {
   EditorSettings,
+  ScreenshotSettings,
   State,
   Theme
 } from '@shared/types/renderer/store/app'
@@ -21,6 +22,13 @@ const EDITOR_DEFAULTS: EditorSettings = {
   highlightGutter: false
 }
 
+const SCREENSHOT_DEFAULTS: ScreenshotSettings = {
+  background: false,
+  gradient: ['#D02F98', '#9439CA'],
+  darkMode: true,
+  width: 600
+}
+
 export const useAppStore = defineStore('app', {
   state: (): State => ({
     isInit: false,
@@ -39,11 +47,16 @@ export const useAppStore = defineStore('app', {
       }
     },
     editor: EDITOR_DEFAULTS,
+    screenshot: SCREENSHOT_DEFAULTS,
     selectedPreferencesMenu: 'storage',
     version,
     platform: platform()
   }),
 
+  getters: {
+    isLightTheme: state => !!state.theme.match(/^light/)
+  },
+
   actions: {
     setTheme (theme: Theme) {
       this.theme = theme
diff --git a/src/renderer/store/snippets.ts b/src/renderer/store/snippets.ts
index ed67a84b..9cb1a9b0 100644
--- a/src/renderer/store/snippets.ts
+++ b/src/renderer/store/snippets.ts
@@ -28,7 +28,8 @@ export const useSnippetStore = defineStore('snippets', {
     searchQuery: undefined,
     sort: 'updatedAt',
     isContextState: false,
-    isMarkdownPreview: false
+    isMarkdownPreview: false,
+    isScreenshotPreview: false
   }),
 
   getters: {
diff --git a/src/shared/types/main/store.d.ts b/src/shared/types/main/store.d.ts
index e7beaa90..587828e5 100644
--- a/src/shared/types/main/store.d.ts
+++ b/src/shared/types/main/store.d.ts
@@ -1,4 +1,4 @@
-import type { EditorSettings } from '../renderer/store/app'
+import type { EditorSettings, ScreenshotSettings } from '../renderer/store/app'
 import type { SnippetsSort } from './db'
 
 export interface AppStore {
@@ -19,5 +19,6 @@ export interface PreferencesStore {
   storagePath: string
   backupPath: string
   editor: EditorSettings
+  screenshot: ScreenshotSettings
   theme: string
 }
diff --git a/src/shared/types/renderer/store/app.d.ts b/src/shared/types/renderer/store/app.d.ts
index f48bab89..4b116d66 100644
--- a/src/shared/types/renderer/store/app.d.ts
+++ b/src/shared/types/renderer/store/app.d.ts
@@ -47,6 +47,13 @@ export interface EditorSettings {
   highlightGutter: boolean
 }
 
+export interface ScreenshotSettings {
+  background: boolean
+  gradient: [string, string]
+  darkMode: boolean
+  width: number
+}
+
 export interface State {
   platform: NodeJS.Platform
   theme: Theme
@@ -55,5 +62,6 @@ export interface State {
   version: string
   editor: EditorSettings
   selectedPreferencesMenu: string
+  screenshot: ScreenshotSettings
   isInit: boolean
 }
diff --git a/src/shared/types/renderer/store/snippets.d.ts b/src/shared/types/renderer/store/snippets.d.ts
index bbac0d28..839415fa 100644
--- a/src/shared/types/renderer/store/snippets.d.ts
+++ b/src/shared/types/renderer/store/snippets.d.ts
@@ -14,4 +14,5 @@ export interface State {
   sort: SnippetsSort
   isContextState: boolean
   isMarkdownPreview: boolean
+  isScreenshotPreview: boolean
 }