diff --git a/src/main/menu/main.ts b/src/main/menu/main.ts index a1513c5f..462a932e 100644 --- a/src/main/menu/main.ts +++ b/src/main/menu/main.ts @@ -352,7 +352,19 @@ const editorMenu: MenuItemConstructorOptions[] = [ } }, { - label: i18n.t('menu:editor.previewMarkdown'), + label: i18n.t('menu:editor.previewCode'), + accelerator: 'Shift+CommandOrControl+P', + click: () => { + BrowserWindow.getFocusedWindow()?.webContents.send( + 'main-menu:preview-code' + ) + } + } +] + +const markdownMenu: MenuItemConstructorOptions[] = [ + { + label: i18n.t('menu:markdown.preview'), accelerator: 'Shift+CommandOrControl+M', click: () => { BrowserWindow.getFocusedWindow()?.webContents.send( @@ -361,11 +373,11 @@ const editorMenu: MenuItemConstructorOptions[] = [ } }, { - label: i18n.t('menu:editor.previewCode'), - accelerator: 'Shift+CommandOrControl+P', + label: i18n.t('menu:markdown.presentationMode'), + accelerator: 'Control+CommandOrControl+P', click: () => { BrowserWindow.getFocusedWindow()?.webContents.send( - 'main-menu:preview-code' + 'main-menu:presentation-mode' ) } } @@ -425,6 +437,10 @@ const menuItems: MenuItemConstructorOptions[] = [ label: i18n.t('menu:editor.label'), submenu: editorMenu }, + { + label: i18n.t('menu:markdown.label'), + submenu: markdownMenu + }, { label: i18n.t('menu:help.label'), submenu: helpMenu diff --git a/src/main/services/i18n/locales/en/menu.json b/src/main/services/i18n/locales/en/menu.json index a8228960..a2416dc5 100644 --- a/src/main/services/i18n/locales/en/menu.json +++ b/src/main/services/i18n/locales/en/menu.json @@ -64,8 +64,12 @@ "label": "Editor", "copy": "Copy Snippet to Clipboard", "format": "Format", - "previewMarkdown": "Preview Markdown", "previewCode": "Preview Code", "previewScreenshot": "Preview Screenshot" + }, + "markdown": { + "label": "Markdown", + "presentationMode": "Presentation Mode", + "preview": "Preview" } } diff --git a/src/main/services/i18n/locales/es_ES/menu.json b/src/main/services/i18n/locales/es_ES/menu.json index 1edf232f..0347ce76 100644 --- a/src/main/services/i18n/locales/es_ES/menu.json +++ b/src/main/services/i18n/locales/es_ES/menu.json @@ -61,8 +61,13 @@ "label": "Editor", "copy": "Copiar Snippet al Portapapeles", "format": "Formato", - "previewMarkdown": "Previsualizar en Markdown", + "previewMarkdown": "", "previewCode": "Previsualizar Código", "previewScreenshot": "Previsualizar Captura de Pantalla" + }, + "markdown": { + "label": "Markdown", + "presentationMode": "Presentation Mode", + "preview": "Preview" } } diff --git a/src/main/services/i18n/locales/pt_BR/menu.json b/src/main/services/i18n/locales/pt_BR/menu.json index 517a08d2..e4136a7c 100644 --- a/src/main/services/i18n/locales/pt_BR/menu.json +++ b/src/main/services/i18n/locales/pt_BR/menu.json @@ -61,8 +61,12 @@ "label": "Editor", "copy": "Copiar para área de transferencia", "format": "Formatar", - "previewMarkdown": "Pré-visualizar marcador", "previewCode": "Pré-visualizar código", "previewScreenshot": "Pré-visualizar captura de tela" + }, + "markdown": { + "label": "Markdown", + "presentationMode": "Presentation Mode", + "preview": "Preview" } -} \ No newline at end of file +} diff --git a/src/main/services/i18n/locales/ru/menu.json b/src/main/services/i18n/locales/ru/menu.json index 86acdd1c..3bc1d2ff 100644 --- a/src/main/services/i18n/locales/ru/menu.json +++ b/src/main/services/i18n/locales/ru/menu.json @@ -64,8 +64,12 @@ "label": "Редактор", "copy": "Скопировать сниппет в буфер", "format": "Форматировать", - "previewMarkdown": "Просмотр Markdown", "previewCode": "Просмотр результата HTML/CSS", "previewScreenshot": "Просмотр скриншота" + }, + "markdown": { + "label": "Markdown", + "presentationMode": "Режим презентации", + "preview": "Просмотр Markdown" } } diff --git a/src/main/services/i18n/locales/zh_CN/menu.json b/src/main/services/i18n/locales/zh_CN/menu.json index 25878a3c..68628b60 100644 --- a/src/main/services/i18n/locales/zh_CN/menu.json +++ b/src/main/services/i18n/locales/zh_CN/menu.json @@ -61,8 +61,12 @@ "label": "编辑器", "copy": "将代码片段复制至剪贴板", "format": "格式化", - "previewMarkdown": "预览 Markdown", "previewCode": "预览 HTML 和 CSS", "previewScreenshot": "生成并预览代码截图" + }, + "markdown": { + "label": "Markdown", + "presentationMode": "Presentation Mode", + "preview": "Preview" } -} \ No newline at end of file +} diff --git a/src/main/services/i18n/locales/zh_HK/menu.json b/src/main/services/i18n/locales/zh_HK/menu.json index 26b49fa8..288c0312 100644 --- a/src/main/services/i18n/locales/zh_HK/menu.json +++ b/src/main/services/i18n/locales/zh_HK/menu.json @@ -61,8 +61,12 @@ "label": "編輯器", "copy": "將代碼片段複製至剪貼板", "format": "格式化", - "previewMarkdown": "預覽 Markdown", "previewCode": "預覽 HTML 和 CSS", "previewScreenshot": "生成並預覽代碼截圖" + }, + "markdown": { + "label": "Markdown", + "presentationMode": "Presentation Mode", + "preview": "Preview" } -} \ No newline at end of file +} diff --git a/src/main/services/i18n/locales/zh_TW/menu.json b/src/main/services/i18n/locales/zh_TW/menu.json index 7eb195e4..ddf2c8bd 100644 --- a/src/main/services/i18n/locales/zh_TW/menu.json +++ b/src/main/services/i18n/locales/zh_TW/menu.json @@ -61,8 +61,12 @@ "label": "編輯器", "copy": "將程式碼片段複製至剪貼簿", "format": "格式化", - "previewMarkdown": "預覽 Markdown", "previewCode": "預覽 HTML 和 CSS", "previewScreenshot": "生成並預覽程式碼截圖" + }, + "markdown": { + "label": "Markdown", + "presentationMode": "Presentation Mode", + "preview": "Preview" } -} \ No newline at end of file +} diff --git a/src/main/store/module/preferences.ts b/src/main/store/module/preferences.ts index 68fef540..aba8fbd9 100644 --- a/src/main/store/module/preferences.ts +++ b/src/main/store/module/preferences.ts @@ -33,6 +33,9 @@ export default new Store({ darkMode: true, width: 600 }, + markdown: { + presentationScale: 1.3 + }, language: 'en' } }) diff --git a/src/renderer/App.vue b/src/renderer/App.vue index 2b2e68c9..589b1873 100644 --- a/src/renderer/App.vue +++ b/src/renderer/App.vue @@ -73,6 +73,7 @@ const init = async () => { appStore.sizes.sidebar = store.app.get('sidebarWidth') appStore.sizes.snippetList = store.app.get('snippetListWidth') appStore.screenshot = store.preferences.get('screenshot') + appStore.markdown = store.preferences.get('markdown') snippetStore.sort = store.app.get('sort') @@ -213,6 +214,13 @@ ipc.on('main-menu:new-fragment', () => { ipc.on('main-menu:preview-markdown', async () => { if (snippetStore.currentLanguage === 'markdown') { snippetStore.isMarkdownPreview = !snippetStore.isMarkdownPreview + track('snippets/markdown-preview') + } +}) +ipc.on('main-menu:presentation-mode', async () => { + if (snippetStore.currentLanguage === 'markdown') { + router.push('/presentation') + track('snippets/presentation-mode') } }) diff --git a/src/renderer/assets/scss/markdown.scss b/src/renderer/assets/scss/markdown.scss index a24a424d..23026fa7 100644 --- a/src/renderer/assets/scss/markdown.scss +++ b/src/renderer/assets/scss/markdown.scss @@ -1,548 +1,955 @@ -.markdown-github { - * { - line-height: 1.5; - } - dfn { - font-style: italic; - } +.markdown-body { + --scale: 1; + -ms-text-size-adjust: 100%; + -webkit-text-size-adjust: 100%; + margin: 0; + font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji"; + font-size: calc(16px * var(--scale)); + line-height: 1.5; + word-wrap: break-word; +} - mark { - background: #ff0; - color: #000; - } +.markdown-body .octicon { + display: inline-block; + fill: currentColor; + vertical-align: text-bottom; +} - small { - font-size: 80%; - } +.markdown-body h1:hover .anchor .octicon-link:before, +.markdown-body h2:hover .anchor .octicon-link:before, +.markdown-body h3:hover .anchor .octicon-link:before, +.markdown-body h4:hover .anchor .octicon-link:before, +.markdown-body h5:hover .anchor .octicon-link:before, +.markdown-body h6:hover .anchor .octicon-link:before { + width: 16px; + height: 16px; + content: ' '; + display: inline-block; + background-color: currentColor; + -webkit-mask-image: url("data:image/svg+xml,"); + mask-image: url("data:image/svg+xml,"); +} - sub, - sup { - font-size: 75%; - line-height: 0; - position: relative; - vertical-align: baseline; - } +.markdown-body details, +.markdown-body figcaption, +.markdown-body figure { + display: block; +} - sup { - top: -0.5em; - } +.markdown-body summary { + display: list-item; +} - sub { - bottom: -0.25em; - } +.markdown-body [hidden] { + display: none !important; +} - img { - border: 0; - } +.markdown-body a { + background-color: transparent; + color: #0969da; + text-decoration: none; +} - svg:not(:root) { - overflow: hidden; - } +.markdown-body a:active, +.markdown-body a:hover { + outline-width: 0; +} - figure { - margin: 1em 40px; - } +.markdown-body abbr[title] { + border-bottom: none; + text-decoration: underline dotted; +} - hr { - box-sizing: content-box; - height: 0; - } +.markdown-body b, +.markdown-body strong { + font-weight: 600; +} - pre { - overflow: auto; - } +.markdown-body dfn { + font-style: italic; +} - code, - kbd, - pre, - samp { - font-family: monospace, monospace; - font-size: 1em; - } +.markdown-body h1 { + margin: .67em 0; + font-weight: 600; + padding-bottom: .3em; + font-size: 2em; + border-bottom: 1px solid hsla(210,18%,87%,1); +} - table { - border-collapse: collapse; - border-spacing: 0; - } +.markdown-body mark { + background-color: #fff8c5; + color: #24292f; +} - td, - th { - padding: 0; - } +.markdown-body small { + font-size: 90%; +} - * { - box-sizing: border-box; - } +.markdown-body sub, +.markdown-body sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} - body { - font-family: 'Helvetica Neue', Helvetica, 'Segoe UI', Arial, freesans, - sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; - font-size: 14px; - line-height: 1.6; - word-wrap: break-word; - margin-top: 10px; - } +.markdown-body sub { + bottom: -0.25em; +} - a { - color: var(--color-primary); - text-decoration: none; - } +.markdown-body sup { + top: -0.5em; +} - a:hover, - a:active { - text-decoration: underline; - } +.markdown-body img { + border-style: none; + max-width: 100%; + box-sizing: content-box; + background-color: #ffffff; +} - hr { - height: 0; - margin: 15px 0; - overflow: hidden; - background: transparent; - border: 0; - border-bottom: 1px solid #ddd; - } +.markdown-body code, +.markdown-body kbd, +.markdown-body pre, +.markdown-body samp { + font-family: monospace,monospace; + font-size: 1em; +} - hr:before { - display: table; - content: ''; - } +.markdown-body figure { + margin: 1em 40px; +} - hr:after { - display: table; - clear: both; - content: ''; - } +.markdown-body hr { + box-sizing: content-box; + overflow: hidden; + background: transparent; + border-bottom: 1px solid hsla(210,18%,87%,1); + height: .25em; + padding: 0; + margin: 24px 0; + background-color: #d0d7de; + border: 0; +} - h1, - h2, - h3, - h4, - h5, - h6 { - margin-top: 15px; - margin-bottom: 15px; - line-height: 1.1; - overflow: hidden; - } +.markdown-body input { + font: inherit; + margin: 0; + overflow: visible; + font-family: inherit; + font-size: inherit; + line-height: inherit; +} - h1 { - font-size: 30px; - } +.markdown-body [type=button], +.markdown-body [type=reset], +.markdown-body [type=submit] { + -webkit-appearance: button; +} - h2 { - font-size: 21px; - } +.markdown-body [type=button]::-moz-focus-inner, +.markdown-body [type=reset]::-moz-focus-inner, +.markdown-body [type=submit]::-moz-focus-inner { + border-style: none; + padding: 0; +} - h3 { - font-size: 16px; - } +.markdown-body [type=button]:-moz-focusring, +.markdown-body [type=reset]:-moz-focusring, +.markdown-body [type=submit]:-moz-focusring { + outline: 1px dotted ButtonText; +} - h4 { - font-size: 14px; - } +.markdown-body [type=checkbox], +.markdown-body [type=radio] { + box-sizing: border-box; + padding: 0; +} - h5 { - font-size: 12px; - } +.markdown-body [type=number]::-webkit-inner-spin-button, +.markdown-body [type=number]::-webkit-outer-spin-button { + height: auto; +} - h6 { - font-size: 11px; - } +.markdown-body [type=search] { + -webkit-appearance: textfield; + outline-offset: -2px; +} - blockquote { - margin: 0; - } +.markdown-body [type=search]::-webkit-search-cancel-button, +.markdown-body [type=search]::-webkit-search-decoration { + -webkit-appearance: none; +} - ul, - ol { - padding: 0; - margin-top: 0; - margin-bottom: 0; - } +.markdown-body ::-webkit-input-placeholder { + color: inherit; + opacity: .54; +} - ol ol, - ul ol { - list-style-type: lower-roman; - } +.markdown-body ::-webkit-file-upload-button { + -webkit-appearance: button; + font: inherit; +} - ul ul ol, - ul ol ol, - ol ul ol, - ol ol ol { - list-style-type: lower-alpha; - } +.markdown-body a:hover { + text-decoration: underline; +} - dd { - margin-left: 0; - } +.markdown-body hr::before { + display: table; + content: ""; +} - tt, - code { - font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace; - font-size: 12px; - } +.markdown-body hr::after { + display: table; + clear: both; + content: ""; +} - pre { - margin-top: 0; - margin-bottom: 0; - font: 12px Consolas, 'Liberation Mono', Menlo, Courier, monospace; - } +.markdown-body table { + border-spacing: 0; + border-collapse: collapse; + display: block; + width: max-content; + max-width: 100%; + overflow: auto; +} - body > :first-child, - body > .toc:first-child + * { - margin-top: 0 !important; - } +.markdown-body td, +.markdown-body th { + padding: 0; +} - body > :last-child { - margin-bottom: 0 !important; - } +.markdown-body details summary { + cursor: pointer; +} - body a:not([href]) { - color: inherit; - text-decoration: none; - } +.markdown-body details:not([open])>*:not(summary) { + display: none !important; +} - h1, - h2, - h3, - h4, - h5, - h6 { - margin-top: 1em; - margin-bottom: 16px; - font-weight: bold; - line-height: 1.4; - } +.markdown-body kbd { + display: inline-block; + padding: 3px 5px; + font: 11px ui-monospace,SFMono-Regular,SF Mono,Menlo,Consolas,Liberation Mono,monospace; + line-height: 10px; + color: #24292f; + vertical-align: middle; + background-color: #f6f8fa; + border: solid 1px rgba(175,184,193,0.2); + border-bottom-color: rgba(175,184,193,0.2); + border-radius: 6px; + box-shadow: inset 0 -1px 0 rgba(175,184,193,0.2); +} - h1 tt, - h1 code, - h2 tt, - h2 code, - h3 tt, - h3 code, - h4 tt, - h4 code, - h5 tt, - h5 code, - h6 tt, - h6 code { - font-size: inherit; - } +.markdown-body h1, +.markdown-body h2, +.markdown-body h3, +.markdown-body h4, +.markdown-body h5, +.markdown-body h6 { + margin-top: 24px; + margin-bottom: 16px; + font-weight: 600; + line-height: 1.25; +} - h1 { - padding-bottom: 0.3em; - font-size: 2em; - line-height: 1.2; - border-bottom: 1px solid #eee; - } +.markdown-body h2 { + font-weight: 600; + padding-bottom: .3em; + font-size: 1.5em; + border-bottom: 1px solid hsla(210,18%,87%,1); +} - h2 { - padding-bottom: 0.3em; - font-size: 1.65em; - line-height: 1.225; - border-bottom: 1px solid #eee; - } +.markdown-body h3 { + font-weight: 600; + font-size: 1.25em; +} - h3 { - font-size: 1.5em; - line-height: 1.43; - } +.markdown-body h4 { + font-weight: 600; + font-size: 1em; +} - h4 { - font-size: 1.25em; - } +.markdown-body h5 { + font-weight: 600; + font-size: .875em; +} - h5 { - font-size: 1em; - } +.markdown-body h6 { + font-weight: 600; + font-size: .85em; + color: #57606a; +} - h6 { - font-size: 1em; - color: #777; - } +.markdown-body p { + margin-top: 0; + margin-bottom: 10px; +} - p, - blockquote, - ul, - ol, - dl, - table, - pre { - margin-top: 0; - margin-bottom: 16px; - } +.markdown-body blockquote { + margin: 0; + padding: 0 1em; + color: #57606a; + border-left: .25em solid #d0d7de; +} - hr { - height: 1px; - padding: 0; - margin: 16px 0; - background-color: #e7e7e7; - border: 0 none; - } +.markdown-body ul, +.markdown-body ol { + margin-top: 0; + margin-bottom: 0; + padding-left: 2em; +} - ul, - ol { - padding-left: 2em; - } +.markdown-body ol ol, +.markdown-body ul ol { + list-style-type: lower-roman; +} - ul ul, - ul ol, - ol ol, - ol ul { - margin-top: 0; - margin-bottom: 0; - } +.markdown-body ul ul ol, +.markdown-body ul ol ol, +.markdown-body ol ul ol, +.markdown-body ol ol ol { + list-style-type: lower-alpha; +} - li > p { - margin-top: 16px; - } +.markdown-body dd { + margin-left: 0; +} - dl { - padding: 0; - } +.markdown-body tt, +.markdown-body code { + font-family: ui-monospace,SFMono-Regular,SF Mono,Menlo,Consolas,Liberation Mono,monospace; + font-size: 12px; +} - dl dt { - padding: 0; - margin-top: 16px; - font-size: 1em; - font-style: italic; - font-weight: bold; - } +.markdown-body pre { + margin-top: 0; + margin-bottom: 0; + font-family: ui-monospace,SFMono-Regular,SF Mono,Menlo,Consolas,Liberation Mono,monospace; + font-size: 12px; + word-wrap: normal; +} - dl dd { - padding: 0 16px; - margin-bottom: 16px; - } +.markdown-body .octicon { + display: inline-block; + overflow: visible !important; + vertical-align: text-bottom; + fill: currentColor; +} - blockquote { - padding: 0 15px; - color: #777; - border-left: 4px solid #ddd; - } +.markdown-body ::placeholder { + color: #6e7781; + opacity: 1; +} - blockquote > :first-child { - margin-top: 0; - } +.markdown-body input::-webkit-outer-spin-button, +.markdown-body input::-webkit-inner-spin-button { + margin: 0; + -webkit-appearance: none; + appearance: none; +} - blockquote > :last-child { - margin-bottom: 0; - } +.markdown-body .pl-c { + color: #6e7781; +} - table { - display: block; - width: 100%; - overflow: auto; - word-break: normal; - word-break: keep-all; - } +.markdown-body .pl-c1, +.markdown-body .pl-s .pl-v { + color: #0550ae; +} - table th { - font-weight: bold; - } +.markdown-body .pl-e, +.markdown-body .pl-en { + color: #8250df; +} - table > tr > th:not([align]), - table > * > tr > th:not([align]) { - text-align: left; - } +.markdown-body .pl-smi, +.markdown-body .pl-s .pl-s1 { + color: #24292f; +} - table th, - table td { - padding: 6px 13px; - border: 1px solid #ddd; - } +.markdown-body .pl-ent { + color: #116329; +} - table tr { - background-color: #fff; - border-top: 1px solid #ccc; - } +.markdown-body .pl-k { + color: #cf222e; +} - table tr:nth-child(2n) { - background-color: #f8f8f8; - } +.markdown-body .pl-s, +.markdown-body .pl-pds, +.markdown-body .pl-s .pl-pse .pl-s1, +.markdown-body .pl-sr, +.markdown-body .pl-sr .pl-cce, +.markdown-body .pl-sr .pl-sre, +.markdown-body .pl-sr .pl-sra { + color: #0a3069; +} - img { - max-width: 100%; - box-sizing: content-box; - } +.markdown-body .pl-v, +.markdown-body .pl-smw { + color: #953800; +} - img[align='right'] { - padding-left: 20px; - } +.markdown-body .pl-bu { + color: #82071e; +} - img[align='left'] { - padding-right: 20px; - } +.markdown-body .pl-ii { + color: #f6f8fa; + background-color: #82071e; +} - code, - tt { - padding: 0; - padding-top: 0.2em; - padding-bottom: 0.2em; - margin: 0; - font-size: 85%; - background-color: rgba(0, 0, 0, 0.04); - border-radius: 3px; - } +.markdown-body .pl-c2 { + color: #f6f8fa; + background-color: #cf222e; +} - code:before, - code:after, - tt:before, - tt:after { - letter-spacing: -0.2em; - content: '\00a0'; - } +.markdown-body .pl-sr .pl-cce { + font-weight: bold; + color: #116329; +} - code br, - tt br { - display: none; - } +.markdown-body .pl-ml { + color: #3b2300; +} - del code { - text-decoration: inherit; - } +.markdown-body .pl-mh, +.markdown-body .pl-mh .pl-en, +.markdown-body .pl-ms { + font-weight: bold; + color: #0550ae; +} - pre > code { - padding: 0; - margin: 0; - font-size: 100%; - word-break: normal; - white-space: pre; - background: transparent; - border: 0; - } +.markdown-body .pl-mi { + font-style: italic; + color: #24292f; +} - .codehilite { - margin-bottom: 16px; - } +.markdown-body .pl-mb { + font-weight: bold; + color: #24292f; +} - .codehilite pre, - pre { - padding: 16px; - overflow: auto; - font-size: 13px; - line-height: 1.45; - background-color: #f7f7f7; - border-radius: 3px; - } +.markdown-body .pl-md { + color: #82071e; + background-color: #FFEBE9; +} - .codehilite pre { - margin-bottom: 0; - word-break: normal; - } +.markdown-body .pl-mi1 { + color: #116329; + background-color: #dafbe1; +} - pre { - word-wrap: normal; - } +.markdown-body .pl-mc { + color: #953800; + background-color: #ffd8b5; +} - pre code, - pre tt { - display: inline; - max-width: initial; - padding: 0; - margin: 0; - overflow: initial; - line-height: inherit; - word-wrap: normal; - background-color: transparent; - border: 0; - } +.markdown-body .pl-mi2 { + color: #eaeef2; + background-color: #0550ae; +} - pre code:before, - pre code:after, - pre tt:before, - pre tt:after { - content: normal; - } +.markdown-body .pl-mdr { + font-weight: bold; + color: #8250df; +} - kbd { - display: inline-block; - padding: 3px 5px; - font-size: 11px; - line-height: 10px; - color: #555; - vertical-align: middle; - background-color: #fcfcfc; - border: solid 1px #ccc; - border-bottom-color: #bbb; - border-radius: 3px; - box-shadow: inset 0 -1px 0 #bbb; - } +.markdown-body .pl-ba { + color: #57606a; +} - .toc { - font-size: 95%; - float: right; - max-width: 200px; - border: 1px solid #ccc; - background-color: #f9f9f9; - padding: 8px 6px; - margin: 0 0 20px 20px; - } +.markdown-body .pl-sg { + color: #8c959f; +} - .toc ul { - margin-top: 0; - margin-bottom: 0; - padding-left: 1.5em; - } +.markdown-body .pl-corl { + text-decoration: underline; + color: #0a3069; +} - .toc li { - margin: 0; - } +.markdown-body [data-catalyst] { + display: block; } +.markdown-body g-emoji { + font-family: "Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"; + font-size: 1em; + font-style: normal !important; + font-weight: 400; + line-height: 1; + vertical-align: -0.075em; +} -[data-theme='light'] { - .markdown-github { - color: #333; +.markdown-body g-emoji img { + width: 1em; + height: 1em; +} + +.markdown-body::before { + display: table; + content: ""; +} + +.markdown-body::after { + display: table; + clear: both; + content: ""; +} + +.markdown-body>*:first-child { + margin-top: 0 !important; +} + +.markdown-body>*:last-child { + margin-bottom: 0 !important; +} + +.markdown-body a:not([href]) { + color: inherit; + text-decoration: none; +} + +.markdown-body .absent { + color: #cf222e; +} + +.markdown-body .anchor { + float: left; + padding-right: 4px; + margin-left: -20px; + line-height: 1; +} + +.markdown-body .anchor:focus { + outline: none; +} + +.markdown-body p, +.markdown-body blockquote, +.markdown-body ul, +.markdown-body ol, +.markdown-body dl, +.markdown-body table, +.markdown-body pre, +.markdown-body details { + margin-top: 0; + margin-bottom: 16px; +} + +.markdown-body blockquote>:first-child { + margin-top: 0; +} + +.markdown-body blockquote>:last-child { + margin-bottom: 0; +} + +.markdown-body sup>a::before { + content: "["; +} + +.markdown-body sup>a::after { + content: "]"; +} + +.markdown-body h1 .octicon-link, +.markdown-body h2 .octicon-link, +.markdown-body h3 .octicon-link, +.markdown-body h4 .octicon-link, +.markdown-body h5 .octicon-link, +.markdown-body h6 .octicon-link { + color: #24292f; + vertical-align: middle; + visibility: hidden; +} + +.markdown-body h1:hover .anchor, +.markdown-body h2:hover .anchor, +.markdown-body h3:hover .anchor, +.markdown-body h4:hover .anchor, +.markdown-body h5:hover .anchor, +.markdown-body h6:hover .anchor { + text-decoration: none; +} + +.markdown-body h1:hover .anchor .octicon-link, +.markdown-body h2:hover .anchor .octicon-link, +.markdown-body h3:hover .anchor .octicon-link, +.markdown-body h4:hover .anchor .octicon-link, +.markdown-body h5:hover .anchor .octicon-link, +.markdown-body h6:hover .anchor .octicon-link { + visibility: visible; +} + +.markdown-body h1 tt, +.markdown-body h1 code, +.markdown-body h2 tt, +.markdown-body h2 code, +.markdown-body h3 tt, +.markdown-body h3 code, +.markdown-body h4 tt, +.markdown-body h4 code, +.markdown-body h5 tt, +.markdown-body h5 code, +.markdown-body h6 tt, +.markdown-body h6 code { + padding: 0 .2em; + font-size: inherit; +} + +.markdown-body ul.no-list, +.markdown-body ol.no-list { + padding: 0; + list-style-type: none; +} + +.markdown-body ol[type="1"] { + list-style-type: decimal; +} + +.markdown-body ol[type=a] { + list-style-type: lower-alpha; +} + +.markdown-body ol[type=i] { + list-style-type: lower-roman; +} + +.markdown-body div>ol:not([type]) { + list-style-type: decimal; +} + +.markdown-body ul ul, +.markdown-body ul ol, +.markdown-body ol ol, +.markdown-body ol ul { + margin-top: 0; + margin-bottom: 0; +} + +.markdown-body li>p { + margin-top: 16px; +} + +.markdown-body li+li { + margin-top: .25em; +} + +.markdown-body dl { + padding: 0; +} + +.markdown-body dl dt { + padding: 0; + margin-top: 16px; + font-size: 1em; + font-style: italic; + font-weight: 600; +} + +.markdown-body dl dd { + padding: 0 16px; + margin-bottom: 16px; +} + +.markdown-body table th { + font-weight: 600; +} + +.markdown-body table th, +.markdown-body table td { + padding: 6px 13px; + border: 1px solid #d0d7de; +} + +.markdown-body table tr { + background-color: #ffffff; + border-top: 1px solid hsla(210,18%,87%,1); +} + +.markdown-body table tr:nth-child(2n) { + background-color: #f6f8fa; +} + +.markdown-body table img { + background-color: transparent; +} + +.markdown-body img[align=right] { + padding-left: 20px; +} + +.markdown-body img[align=left] { + padding-right: 20px; +} + +.markdown-body .emoji { + max-width: none; + vertical-align: text-top; + background-color: transparent; +} + +.markdown-body span.frame { + display: block; + overflow: hidden; +} + +.markdown-body span.frame>span { + display: block; + float: left; + width: auto; + padding: 7px; + margin: 13px 0 0; + overflow: hidden; + border: 1px solid #d0d7de; +} + +.markdown-body span.frame span img { + display: block; + float: left; +} + +.markdown-body span.frame span span { + display: block; + padding: 5px 0 0; + clear: both; + color: #24292f; +} + +.markdown-body span.align-center { + display: block; + overflow: hidden; + clear: both; +} + +.markdown-body span.align-center>span { + display: block; + margin: 13px auto 0; + overflow: hidden; + text-align: center; +} + +.markdown-body span.align-center span img { + margin: 0 auto; + text-align: center; +} + +.markdown-body span.align-right { + display: block; + overflow: hidden; + clear: both; +} + +.markdown-body span.align-right>span { + display: block; + margin: 13px 0 0; + overflow: hidden; + text-align: right; +} + +.markdown-body span.align-right span img { + margin: 0; + text-align: right; +} + +.markdown-body span.float-left { + display: block; + float: left; + margin-right: 13px; + overflow: hidden; +} + +.markdown-body span.float-left span { + margin: 13px 0 0; +} + +.markdown-body span.float-right { + display: block; + float: right; + margin-left: 13px; + overflow: hidden; +} + +.markdown-body span.float-right>span { + display: block; + margin: 13px auto 0; + overflow: hidden; + text-align: right; +} + +.markdown-body code, +.markdown-body tt { + padding: .2em .4em; + margin: 0; + font-size: 85%; + background-color: rgba(175,184,193,0.2); + border-radius: 6px; +} + +.markdown-body code br, +.markdown-body tt br { + display: none; +} + +.markdown-body del code { + text-decoration: inherit; +} + +.markdown-body pre code { + font-size: 100%; +} + +.markdown-body pre>code { + padding: 0; + margin: 0; + word-break: normal; + white-space: pre; + background: transparent; + border: 0; +} + +.markdown-body .highlight { + margin-bottom: 16px; +} + +.markdown-body .highlight pre { + margin-bottom: 0; + word-break: normal; +} + +.markdown-body .highlight pre, +.markdown-body pre { + padding: 16px; + overflow: auto; + font-size: 85%; + line-height: 1.45; + background-color: #f6f8fa; + border-radius: 6px; +} + +.markdown-body pre code, +.markdown-body pre tt { + display: inline; + max-width: auto; + padding: 0; + margin: 0; + overflow: visible; + line-height: inherit; + word-wrap: normal; + background-color: transparent; + border: 0; +} + +.markdown-body .csv-data td, +.markdown-body .csv-data th { + padding: 5px; + overflow: hidden; + font-size: 12px; + line-height: 1; + text-align: left; + white-space: nowrap; +} + +.markdown-body .csv-data .blob-num { + padding: 10px 8px 9px; + text-align: right; + background: #ffffff; + border: 0; +} + +.markdown-body .csv-data tr { + border-top: 0; +} + +.markdown-body .csv-data th { + font-weight: 600; + background: #f6f8fa; + border-top: 0; +} + +.markdown-body .footnotes { + font-size: 12px; + color: #57606a; + border-top: 1px solid #d0d7de; +} + +.markdown-body .footnotes ol { + padding-left: 16px; +} + +.markdown-body .footnotes li { + position: relative; +} + +.markdown-body .footnotes li:target::before { + position: absolute; + top: -8px; + right: -8px; + bottom: -8px; + left: -24px; + pointer-events: none; + content: ""; + border: 2px solid #0969da; + border-radius: 6px; +} + +.markdown-body .footnotes li:target { + color: #24292f; +} + +.markdown-body .footnotes .data-footnote-backref g-emoji { + font-family: monospace; +} + +.markdown-body .task-list-item { + list-style-type: none; +} + +.markdown-body .task-list-item label { + font-weight: 400; +} + +.markdown-body .task-list-item.enabled label { + cursor: pointer; +} + +.markdown-body .task-list-item+.task-list-item { + margin-top: 3px; +} + +.markdown-body .task-list-item .handle { + display: none; +} + +.markdown-body .task-list-item-checkbox { + margin: 0 .2em .25em -1.6em; + vertical-align: middle; +} + +.markdown-body .contains-task-list:dir(rtl) .task-list-item-checkbox { + margin: 0 -1.6em .25em .2em; +} + +.markdown-body ::-webkit-calendar-picker-indicator { + filter: invert(50%); +} + +[data-theme^='light'] { + .markdown-body { + pre { + background-color: rgba(0, 0, 0, 0.03); + } } } -[data-theme='dark'] { - .markdown-github { +[data-theme^='dark'] { + .markdown-body { pre { background-color: rgba(0, 0, 0, 0.15); } - - a, - a:visited { - color: var(--color-primary); - } - - a:hover, - a:active { - color: var(--color-primary); - } - - h1, - h2 { - border-bottom-color: rgba(255, 255, 255, 0.1); - } - - h6 { - color: rgba(255, 255, 255, 0.5); - } - - hr { - background-color: rgba(255, 255, 255, 0.1); - } - - blockquote { - color: rgba(255, 255, 255, 0.5); - border-left-color: rgba(255, 255, 255, 0.1); - } - - table tr { - background-color: transparent; - } - - table tr, - table th, - table td { - border-color: rgba(255, 255, 255, 0.1); - } - - .toc { - background-color: rgba(255, 255, 255, 0.05); - border: none; - } } -} +} \ No newline at end of file diff --git a/src/renderer/components/markdown/TheMarkdown.vue b/src/renderer/components/markdown/TheMarkdown.vue index ebfe9310..b4f72a00 100644 --- a/src/renderer/components/markdown/TheMarkdown.vue +++ b/src/renderer/components/markdown/TheMarkdown.vue @@ -1,5 +1,5 @@ @@ -12,6 +12,9 @@ align-items: center; padding: 4px 6px; border-radius: 4px; + border: none; + background-color: transparent; + outline: none; :deep(svg) { fill: var(--color-button-action); } diff --git a/src/renderer/router.ts b/src/renderer/router.ts index 54e200cf..5d358cf1 100644 --- a/src/renderer/router.ts +++ b/src/renderer/router.ts @@ -2,11 +2,13 @@ import type { RouteRecordRaw } from 'vue-router' import { createWebHistory, createRouter } from 'vue-router' import Main from './views/Main.vue' import Preferences from './views/Preferences.vue' +import Presentation from './views/Presentation.vue' const history = createWebHistory() const routes: RouteRecordRaw[] = [ { path: '/', component: Main }, - { path: '/preferences', component: Preferences } + { path: '/preferences', component: Preferences }, + { path: '/presentation', component: Presentation } ] const router = createRouter({ history, routes }) diff --git a/src/renderer/store/app.ts b/src/renderer/store/app.ts index f5d76c6b..f5e209ba 100644 --- a/src/renderer/store/app.ts +++ b/src/renderer/store/app.ts @@ -1,4 +1,5 @@ import { platform, store } from '@/electron' +import type { MarkdownSettings } from '@shared/types/main/store' import type { CodePreviewSettings, EditorSettings, @@ -33,6 +34,10 @@ const CODE_PREVIEW_DEFAULTS: CodePreviewSettings = { darkMode: false } +const MARKDOWN_DEFAULTS: MarkdownSettings = { + presentationScale: 1.3 +} + export const useAppStore = defineStore('app', { state: (): State => ({ isInit: false, @@ -55,6 +60,7 @@ export const useAppStore = defineStore('app', { editor: EDITOR_DEFAULTS, screenshot: SCREENSHOT_DEFAULTS, codePreview: CODE_PREVIEW_DEFAULTS, + markdown: MARKDOWN_DEFAULTS, selectedPreferencesMenu: 'storage', language: store.preferences.get('language'), version, diff --git a/src/renderer/views/Presentation.vue b/src/renderer/views/Presentation.vue new file mode 100644 index 00000000..2fa02aba --- /dev/null +++ b/src/renderer/views/Presentation.vue @@ -0,0 +1,212 @@ + + + + + diff --git a/src/shared/types/main/analytics.d.ts b/src/shared/types/main/analytics.d.ts index 12e1d855..bd22c9d8 100644 --- a/src/shared/types/main/analytics.d.ts +++ b/src/shared/types/main/analytics.d.ts @@ -6,17 +6,19 @@ type SnippetEvents = | 'add-new' | 'add-tag' | 'add-to-favorites' + | 'code-preview' | 'copy' + | 'create-screenshot' | 'delete-fragment' | 'delete-from-favorites' | 'delete' | 'duplicate' | 'format' + | 'markdown-preview' | 'move-to-trash' + | 'presentation-mode' | 'search' | 'set-language' - | 'create-screenshot' - | 'code-preview' type FolderEvents = 'add-new' | 'delete' | 'set-language' type TagEvents = 'add-new' | 'delete' diff --git a/src/shared/types/main/index.d.ts b/src/shared/types/main/index.d.ts index c1edcec3..feb64822 100644 --- a/src/shared/types/main/index.d.ts +++ b/src/shared/types/main/index.d.ts @@ -39,8 +39,9 @@ type MainMenuAction = | 'new-fragment' | 'new-snippet' | 'preferences' - | 'preview-markdown' + | 'presentation-mode' | 'preview-code' + | 'preview-markdown' | 'search' | 'sort-snippets' diff --git a/src/shared/types/main/store.d.ts b/src/shared/types/main/store.d.ts index c94a529f..4c6b7cc8 100644 --- a/src/shared/types/main/store.d.ts +++ b/src/shared/types/main/store.d.ts @@ -16,11 +16,16 @@ export interface AppStore { version?: string } +export interface MarkdownSettings { + presentationScale: number +} + export interface PreferencesStore { storagePath: string backupPath: string editor: EditorSettings screenshot: ScreenshotSettings + markdown: MarkdownSettings theme: string language: string } diff --git a/src/shared/types/renderer/store/app.d.ts b/src/shared/types/renderer/store/app.d.ts index e88b126b..910b6140 100644 --- a/src/shared/types/renderer/store/app.d.ts +++ b/src/shared/types/renderer/store/app.d.ts @@ -1,3 +1,5 @@ +import type { MarkdownSettings } from '@shared/types/main/store' + export type Theme = | 'dark:dracula' | 'dark:material-palenight' @@ -57,6 +59,7 @@ export interface State { editor: EditorSettings selectedPreferencesMenu: string screenshot: ScreenshotSettings + markdown: MarkdownSettings codePreview: CodePreviewSettings language: string isInit: boolean