From 302ef89bee8f4a749b60960f17b930bc22f0a0c4 Mon Sep 17 00:00:00 2001 From: momei <2262754355@qq.com> Date: Fri, 28 Nov 2025 23:18:16 +0800 Subject: [PATCH 1/2] fix: keep white space --- webview/style.css | 1 + 1 file changed, 1 insertion(+) diff --git a/webview/style.css b/webview/style.css index 1445ad5..14fcfe2 100644 --- a/webview/style.css +++ b/webview/style.css @@ -852,6 +852,7 @@ body { } #snippet { + white-space: pre; max-width: 100%; word-break: break-all; color: var(--vscode-editor-foreground); From 097756419ae428d5d832b83f7a9fbb13aa7c5c49 Mon Sep 17 00:00:00 2001 From: momei <2262754355@qq.com> Date: Fri, 28 Nov 2025 23:19:36 +0800 Subject: [PATCH 2/2] chore: format --- README.md | 6 +- style.css | 4 +- tailwind.config.js | 8 +- webview/index.html | 152 ++++++++++++++++++------------- webview/src/code.js | 50 +++++----- webview/src/index.js | 96 ++++++++++---------- webview/src/snap.js | 2 +- webview/style.css | 211 +++++++++++++++++++++++-------------------- 8 files changed, 278 insertions(+), 251 deletions(-) diff --git a/README.md b/README.md index f1f6caa..d33955a 100644 --- a/README.md +++ b/README.md @@ -1,7 +1,8 @@ # CodeSnap-plus + **(Fork from CodeSnap-luo)** -📸 Take beautiful screenshots of your code in VS Code! +📸 Take beautiful screenshots of your code in VS Code! And you can hightlight the line just by click the line number. ![UI](https://raw.githubusercontent.com/huibizhang/CodeSnap-plus/master/examples/ui.png) @@ -22,7 +23,6 @@ And you can hightlight the line just by click the line number. - Show line numbers - Many other configuration options - ## Basic Usage Instructions 1. Open the command palette (Ctrl+Shift+P on Windows and Linux, Cmd+Shift+P on OS X) and search for `CodeSnap-plus`. @@ -36,8 +36,8 @@ And you can hightlight the line just by click the line number. - If you'd like to bind CodeSnap to a hotkey, open up your keyboard shortcut settings and bind `codesnap-plus.start` to a custom keybinding. - If you'd like to copy to clipboard instead of saving, click the image and press the copy keyboard shortcut (defaults are Ctrl+C on Windows and Linux, Cmd+C on OS X), or bind `codesnap.shutterAction` to `copy` in your settings - ## Hightlight Usage Instructions + If you want to hightlight the line just click the line number, and the line will be hightlighted. - Click once: Style **focus** diff --git a/style.css b/style.css index 4337148..0213b1e 100644 --- a/style.css +++ b/style.css @@ -119,12 +119,10 @@ body { font-size: calc(var(--vscode-editor-font-size) + 2px); } - -.line-code-size-nofirst>span>span:nth-child(1) { +.line-code-size-nofirst > span > span:nth-child(1) { font-size: var(--vscode-editor-font-size); } - #save-container { margin-top: 1rem; margin-bottom: 1rem; diff --git a/tailwind.config.js b/tailwind.config.js index 292b143..d9a5b52 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -1,8 +1,8 @@ /** @type {import('tailwindcss').Config} */ module.exports = { - content: ['./webview/index.html','./webview/src/**/*.js'], + content: ['./webview/index.html', './webview/src/**/*.js'], theme: { - extend: {}, + extend: {} }, - plugins: [], -} + plugins: [] +}; diff --git a/webview/index.html b/webview/index.html index 16e1a50..e91adb8 100644 --- a/webview/index.html +++ b/webview/index.html @@ -22,91 +22,116 @@
- - -
- +
- + id="save" + class="shutter hover:brightness-125 transition-all active:scale-90" + xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + version="1.1" + x="0px" + y="0px" + viewBox="0 0 28.3 28.3" + xml:space="preserve" + > - - - - - - - - - + + + + + + + + + /> + - - +
- -
@@ -114,11 +139,11 @@
- - + - +
@@ -134,9 +159,8 @@
- -
+
diff --git a/webview/src/code.js b/webview/src/code.js index d14dbcb..b8a282c 100644 --- a/webview/src/code.js +++ b/webview/src/code.js @@ -16,35 +16,29 @@ const setupLines = (node, config) => { if (config.showLineNumbers) { const lineNum = document.createElement('div'); lineNum.classList.add('line-number'); - + // lineNumber click event lineNum.onclick = function (e) { - var firstRowIsWhiteSpace = this.nextSibling.firstChild.firstChild.innerText.trim() === ""; - - if(this.parentNode.classList.contains("line-focus")) { - - this.parentNode.classList.remove("line-focus"); - this.parentNode.classList.add("git-add"); - this.classList.add('!text-white') - - } else if (this.parentNode.classList.contains("git-add")) { - - this.parentNode.classList.remove("git-add"); - this.parentNode.classList.add("git-remove"); - this.classList.add('!text-white') - - } else if (this.parentNode.classList.contains("git-remove")) { - - this.parentNode.classList.remove("line-focus"); - this.parentNode.classList.remove("git-add"); - this.parentNode.classList.remove("git-remove"); - lineNum.classList.remove('text-white') - + var firstRowIsWhiteSpace = this.nextSibling.firstChild.firstChild.innerText.trim() === ''; + + if (this.parentNode.classList.contains('line-focus')) { + this.parentNode.classList.remove('line-focus'); + this.parentNode.classList.add('git-add'); + this.classList.add('!text-white'); + } else if (this.parentNode.classList.contains('git-add')) { + this.parentNode.classList.remove('git-add'); + this.parentNode.classList.add('git-remove'); + this.classList.add('!text-white'); + } else if (this.parentNode.classList.contains('git-remove')) { + this.parentNode.classList.remove('line-focus'); + this.parentNode.classList.remove('git-add'); + this.parentNode.classList.remove('git-remove'); + lineNum.classList.remove('text-white'); } else { - this.parentNode.classList.add("line-focus"); - this.parentNode.classList.remove("git-add"); - this.parentNode.classList.remove("git-remove"); - lineNum.classList.add('!text-white') + this.parentNode.classList.add('line-focus'); + this.parentNode.classList.remove('git-add'); + this.parentNode.classList.remove('git-remove'); + lineNum.classList.add('!text-white'); } }; lineNum.textContent = idx + 1 + config.startLine; @@ -62,11 +56,11 @@ const setupLines = (node, config) => { var char = row.innerText.trim(); const lineCode = document.createElement('span'); - lineCode.innerHTML = row.innerHTML.split(char).join(""); + lineCode.innerHTML = row.innerHTML.split(char).join(''); lineCodeDiv.appendChild(lineCode); const lineCode1 = document.createElement('span'); - lineCode1.innerHTML = row.innerHTML.replace(/ /ig, ""); + lineCode1.innerHTML = row.innerHTML.replace(/ /gi, ''); lineCodeDiv.appendChild(lineCode1); } else { const lineCode = document.createElement('span'); diff --git a/webview/src/index.js b/webview/src/index.js index 49107ba..d4ca5a2 100644 --- a/webview/src/index.js +++ b/webview/src/index.js @@ -10,7 +10,7 @@ const btnCopy = $('#secondMainBtn'); const showLineNumBtn = $('#showLineNumBtn'); const showWindowControls = $('#showWindowControls'); -const modeChangeBtn = $("#modeChangeBtn") +const modeChangeBtn = $('#modeChangeBtn'); let _toolMode; @@ -41,7 +41,7 @@ window.addEventListener('message', ({ data: { type, ...cfg } }) => { toolMode } = config; - _toolMode = toolMode + _toolMode = toolMode; setVar('ligatures', fontLigatures ? 'normal' : 'none'); if (typeof fontLigatures === 'string') setVar('font-features', fontLigatures); @@ -59,74 +59,74 @@ window.addEventListener('message', ({ data: { type, ...cfg } }) => { document.execCommand('paste'); - let actions = [] - if(shutterAction == "save") { - actions = [ - () => takeSnap(config), - () => takeSnap({ ...config, shutterAction: 'copy' }), - ] - btnCopy.textContent = "Copy" + let actions = []; + if (shutterAction == 'save') { + actions = [() => takeSnap(config), () => takeSnap({ ...config, shutterAction: 'copy' })]; + btnCopy.textContent = 'Copy'; } else { - actions = [ - () => takeSnap(config), - () => takeSnap({ ...config, shutterAction: 'save' }), - ] - btnCopy.textContent = "Save As..." + actions = [() => takeSnap(config), () => takeSnap({ ...config, shutterAction: 'save' })]; + btnCopy.textContent = 'Save As...'; } - btnSave.addEventListener('click', actions[0]) - btnCopy.addEventListener('click', actions[1]) + btnSave.addEventListener('click', actions[0]); + btnCopy.addEventListener('click', actions[1]); - if(!showLineNumbers) { - document.getElementById('showLineNumBtn').children[0].children[0].classList.toggle('opacity-0'); + if (!showLineNumbers) { + document + .getElementById('showLineNumBtn') + .children[0].children[0].classList.toggle('opacity-0'); } showLineNumBtn.addEventListener('click', () => { - - document.getElementById('showLineNumBtn').children[0].children[0].classList.toggle('opacity-0'); + document + .getElementById('showLineNumBtn') + .children[0].children[0].classList.toggle('opacity-0'); // showLineNumBtn.firstChild.classList.toggle('opacity-100'); const lineNums = $$('.line-number'); - - lineNums.forEach(lineNum => { - lineNum.classList.toggle("hidden") - }) - }) - - if(!showWindowControls){ - document.getElementById('showWindowControlsBtn').children[0].children[0].classList.toggle('opacity-0'); + + lineNums.forEach((lineNum) => { + lineNum.classList.toggle('hidden'); + }); + }); + + if (!showWindowControls) { + document + .getElementById('showWindowControlsBtn') + .children[0].children[0].classList.toggle('opacity-0'); } showWindowControlsBtn.addEventListener('click', () => { - document.getElementById('showWindowControlsBtn').children[0].children[0].classList.toggle('opacity-0'); - windowControlsNode.hidden = !windowControlsNode.hidden + document + .getElementById('showWindowControlsBtn') + .children[0].children[0].classList.toggle('opacity-0'); + windowControlsNode.hidden = !windowControlsNode.hidden; navbarNode.hidden = windowControlsNode.hidden && !showWindowTitle; - }) + }); - toolModeToggled() + toolModeToggled(); modeChangeBtn.addEventListener('click', () => { - _toolMode = _toolMode==='advanced' ? 'simple': 'advanced' - toolModeToggled() - }) - + _toolMode = _toolMode === 'advanced' ? 'simple' : 'advanced'; + toolModeToggled(); + }); } else if (type === 'flash') { cameraFlashAnimation(); } }); const toolModeToggled = () => { - if(_toolMode=='advanced') { - btnCopy.classList.remove("hidden") - $('#showLineNumBtn').classList.remove("hidden") - $('#showWindowControlsBtn').classList.remove("hidden") - $("#rightPanel").classList.remove("justify-end") - modeChangeBtn.textContent = "Simple Mode" + if (_toolMode == 'advanced') { + btnCopy.classList.remove('hidden'); + $('#showLineNumBtn').classList.remove('hidden'); + $('#showWindowControlsBtn').classList.remove('hidden'); + $('#rightPanel').classList.remove('justify-end'); + modeChangeBtn.textContent = 'Simple Mode'; } else { - btnCopy.classList.add("hidden") - $('#showLineNumBtn').classList.add("hidden") - $('#showWindowControlsBtn').classList.add("hidden") - $("#rightPanel").classList.add("justify-end") - modeChangeBtn.textContent = "Advanced Mode" + btnCopy.classList.add('hidden'); + $('#showLineNumBtn').classList.add('hidden'); + $('#showWindowControlsBtn').classList.add('hidden'); + $('#rightPanel').classList.add('justify-end'); + modeChangeBtn.textContent = 'Advanced Mode'; } -} \ No newline at end of file +}; diff --git a/webview/src/snap.js b/webview/src/snap.js index 542a871..e4e3d79 100644 --- a/webview/src/snap.js +++ b/webview/src/snap.js @@ -50,4 +50,4 @@ export const takeSnap = async (config) => { windowNode.style.resize = 'horizontal'; setVar('container-background-color', config.backgroundColor); -}; \ No newline at end of file +}; diff --git a/webview/style.css b/webview/style.css index 14fcfe2..43623e7 100644 --- a/webview/style.css +++ b/webview/style.css @@ -40,9 +40,11 @@ html { -moz-tab-size: 4; /* 3 */ -o-tab-size: 4; - tab-size: 4; + tab-size: 4; /* 3 */ - font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; + font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, + 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', + 'Segoe UI Symbol', 'Noto Color Emoji'; /* 4 */ } @@ -79,7 +81,7 @@ Add the correct text decoration in Chrome, Edge, and Safari. abbr:where([title]) { -webkit-text-decoration: underline dotted; - text-decoration: underline dotted; + text-decoration: underline dotted; } /* @@ -123,7 +125,8 @@ code, kbd, samp, pre { - font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; + font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', + 'Courier New', monospace; /* 1 */ font-size: 1em; /* 2 */ @@ -348,7 +351,8 @@ textarea { 2. Set the default placeholder color to the user's configured gray 400 color. */ -input::-moz-placeholder, textarea::-moz-placeholder { +input::-moz-placeholder, +textarea::-moz-placeholder { opacity: 1; /* 1 */ color: #9ca3af; @@ -368,7 +372,7 @@ Set the default cursor for buttons. */ button, -[role="button"] { +[role='button'] { cursor: pointer; } @@ -410,7 +414,9 @@ video { height: auto; } -*, ::before, ::after { +*, +::before, +::after { --tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-translate-x: 0; @@ -420,16 +426,16 @@ video { --tw-skew-y: 0; --tw-scale-x: 1; --tw-scale-y: 1; - --tw-pan-x: ; - --tw-pan-y: ; - --tw-pinch-zoom: ; + --tw-pan-x: ; + --tw-pan-y: ; + --tw-pinch-zoom: ; --tw-scroll-snap-strictness: proximity; - --tw-ordinal: ; - --tw-slashed-zero: ; - --tw-numeric-figure: ; - --tw-numeric-spacing: ; - --tw-numeric-fraction: ; - --tw-ring-inset: ; + --tw-ordinal: ; + --tw-slashed-zero: ; + --tw-numeric-figure: ; + --tw-numeric-spacing: ; + --tw-numeric-fraction: ; + --tw-ring-inset: ; --tw-ring-offset-width: 0px; --tw-ring-offset-color: #fff; --tw-ring-color: rgb(59 130 246 / 0.5); @@ -437,24 +443,24 @@ video { --tw-ring-shadow: 0 0 #0000; --tw-shadow: 0 0 #0000; --tw-shadow-colored: 0 0 #0000; - --tw-blur: ; - --tw-brightness: ; - --tw-contrast: ; - --tw-grayscale: ; - --tw-hue-rotate: ; - --tw-invert: ; - --tw-saturate: ; - --tw-sepia: ; - --tw-drop-shadow: ; - --tw-backdrop-blur: ; - --tw-backdrop-brightness: ; - --tw-backdrop-contrast: ; - --tw-backdrop-grayscale: ; - --tw-backdrop-hue-rotate: ; - --tw-backdrop-invert: ; - --tw-backdrop-opacity: ; - --tw-backdrop-saturate: ; - --tw-backdrop-sepia: ; + --tw-blur: ; + --tw-brightness: ; + --tw-contrast: ; + --tw-grayscale: ; + --tw-hue-rotate: ; + --tw-invert: ; + --tw-saturate: ; + --tw-sepia: ; + --tw-drop-shadow: ; + --tw-backdrop-blur: ; + --tw-backdrop-brightness: ; + --tw-backdrop-contrast: ; + --tw-backdrop-grayscale: ; + --tw-backdrop-hue-rotate: ; + --tw-backdrop-invert: ; + --tw-backdrop-opacity: ; + --tw-backdrop-saturate: ; + --tw-backdrop-sepia: ; } ::-webkit-backdrop { @@ -467,16 +473,16 @@ video { --tw-skew-y: 0; --tw-scale-x: 1; --tw-scale-y: 1; - --tw-pan-x: ; - --tw-pan-y: ; - --tw-pinch-zoom: ; + --tw-pan-x: ; + --tw-pan-y: ; + --tw-pinch-zoom: ; --tw-scroll-snap-strictness: proximity; - --tw-ordinal: ; - --tw-slashed-zero: ; - --tw-numeric-figure: ; - --tw-numeric-spacing: ; - --tw-numeric-fraction: ; - --tw-ring-inset: ; + --tw-ordinal: ; + --tw-slashed-zero: ; + --tw-numeric-figure: ; + --tw-numeric-spacing: ; + --tw-numeric-fraction: ; + --tw-ring-inset: ; --tw-ring-offset-width: 0px; --tw-ring-offset-color: #fff; --tw-ring-color: rgb(59 130 246 / 0.5); @@ -484,24 +490,24 @@ video { --tw-ring-shadow: 0 0 #0000; --tw-shadow: 0 0 #0000; --tw-shadow-colored: 0 0 #0000; - --tw-blur: ; - --tw-brightness: ; - --tw-contrast: ; - --tw-grayscale: ; - --tw-hue-rotate: ; - --tw-invert: ; - --tw-saturate: ; - --tw-sepia: ; - --tw-drop-shadow: ; - --tw-backdrop-blur: ; - --tw-backdrop-brightness: ; - --tw-backdrop-contrast: ; - --tw-backdrop-grayscale: ; - --tw-backdrop-hue-rotate: ; - --tw-backdrop-invert: ; - --tw-backdrop-opacity: ; - --tw-backdrop-saturate: ; - --tw-backdrop-sepia: ; + --tw-blur: ; + --tw-brightness: ; + --tw-contrast: ; + --tw-grayscale: ; + --tw-hue-rotate: ; + --tw-invert: ; + --tw-saturate: ; + --tw-sepia: ; + --tw-drop-shadow: ; + --tw-backdrop-blur: ; + --tw-backdrop-brightness: ; + --tw-backdrop-contrast: ; + --tw-backdrop-grayscale: ; + --tw-backdrop-hue-rotate: ; + --tw-backdrop-invert: ; + --tw-backdrop-opacity: ; + --tw-backdrop-saturate: ; + --tw-backdrop-sepia: ; } ::backdrop { @@ -514,16 +520,16 @@ video { --tw-skew-y: 0; --tw-scale-x: 1; --tw-scale-y: 1; - --tw-pan-x: ; - --tw-pan-y: ; - --tw-pinch-zoom: ; + --tw-pan-x: ; + --tw-pan-y: ; + --tw-pinch-zoom: ; --tw-scroll-snap-strictness: proximity; - --tw-ordinal: ; - --tw-slashed-zero: ; - --tw-numeric-figure: ; - --tw-numeric-spacing: ; - --tw-numeric-fraction: ; - --tw-ring-inset: ; + --tw-ordinal: ; + --tw-slashed-zero: ; + --tw-numeric-figure: ; + --tw-numeric-spacing: ; + --tw-numeric-fraction: ; + --tw-ring-inset: ; --tw-ring-offset-width: 0px; --tw-ring-offset-color: #fff; --tw-ring-color: rgb(59 130 246 / 0.5); @@ -531,24 +537,24 @@ video { --tw-ring-shadow: 0 0 #0000; --tw-shadow: 0 0 #0000; --tw-shadow-colored: 0 0 #0000; - --tw-blur: ; - --tw-brightness: ; - --tw-contrast: ; - --tw-grayscale: ; - --tw-hue-rotate: ; - --tw-invert: ; - --tw-saturate: ; - --tw-sepia: ; - --tw-drop-shadow: ; - --tw-backdrop-blur: ; - --tw-backdrop-brightness: ; - --tw-backdrop-contrast: ; - --tw-backdrop-grayscale: ; - --tw-backdrop-hue-rotate: ; - --tw-backdrop-invert: ; - --tw-backdrop-opacity: ; - --tw-backdrop-saturate: ; - --tw-backdrop-sepia: ; + --tw-blur: ; + --tw-brightness: ; + --tw-contrast: ; + --tw-grayscale: ; + --tw-hue-rotate: ; + --tw-invert: ; + --tw-saturate: ; + --tw-sepia: ; + --tw-drop-shadow: ; + --tw-backdrop-blur: ; + --tw-backdrop-brightness: ; + --tw-backdrop-contrast: ; + --tw-backdrop-grayscale: ; + --tw-backdrop-hue-rotate: ; + --tw-backdrop-invert: ; + --tw-backdrop-opacity: ; + --tw-backdrop-saturate: ; + --tw-backdrop-sepia: ; } .container { @@ -791,11 +797,11 @@ body { font-variant-ligatures: var(--ligatures); font-feature-settings: var(--font-features); -moz-tab-size: var(--tab-size); - -o-tab-size: var(--tab-size); - tab-size: var(--tab-size); + -o-tab-size: var(--tab-size); + tab-size: var(--tab-size); -webkit-user-select: none; - -moz-user-select: none; - user-select: none; + -moz-user-select: none; + user-select: none; } #snippet-scroll { @@ -898,7 +904,7 @@ body { font-size: calc(var(--vscode-editor-font-size) + 2px); } -.line-code-size-nofirst>span>span:nth-child(1) { +.line-code-size-nofirst > span > span:nth-child(1) { font-size: var(--vscode-editor-font-size); } @@ -1016,17 +1022,22 @@ body { .hover\:brightness-125:hover { --tw-brightness: brightness(1.25); - filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); + filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) + var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); } .active\:scale-95:active { - --tw-scale-x: .95; - --tw-scale-y: .95; - transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); + --tw-scale-x: 0.95; + --tw-scale-y: 0.95; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) + skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) + scaleY(var(--tw-scale-y)); } .active\:scale-90:active { - --tw-scale-x: .9; - --tw-scale-y: .9; - transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); + --tw-scale-x: 0.9; + --tw-scale-y: 0.9; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) + skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) + scaleY(var(--tw-scale-y)); }