Skip to content

keep white space &format the code #100

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
momei-LJM wants to merge 2 commits into
base: dev
Choose a base branch
from
Open

keep white space &format the code #100

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
302ef89
fix: keep white space
momei-LJM Nov 28, 2025
0977564
chore: format
momei-LJM Nov 28, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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)
Expand All @@ -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`.
Expand All @@ -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**
Expand Down
4 changes: 1 addition & 3 deletions style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
8 changes: 4 additions & 4 deletions tailwind.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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: []
};
152 changes: 88 additions & 64 deletions webview/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,103 +22,128 @@
<!-- <div id="log">0</div> -->

<div id="leftPanel" class="flex justify-end flex-1 space-x-2">

<button id="showWindowControlsBtn" class="flex py-2 pr-4 pl-3 bg-gray-800 rounded-md hover:bg-gray-700 transition-all active:scale-95 items-center">
<button
id="showWindowControlsBtn"
class="flex py-2 pr-4 pl-3 bg-gray-800 rounded-md hover:bg-gray-700 transition-all active:scale-95 items-center"
>
<div class="rounded bg-gray-900">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4 p-0.5 text-green-400 transition-all">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="w-4 h-4 p-0.5 text-green-400 transition-all"
>
<path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" />
</svg>
</svg>
</div>
<span class="ml-1.5">Window Controls</span>
</button>

<button id="showLineNumBtn" class="flex py-2 pr-4 pl-3 bg-gray-800 rounded-md hover:bg-gray-700 transition-all active:scale-95 items-center">
<button
id="showLineNumBtn"
class="flex py-2 pr-4 pl-3 bg-gray-800 rounded-md hover:bg-gray-700 transition-all active:scale-95 items-center"
>
<div class="rounded bg-gray-900">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4 p-0.5 text-green-400 transition-all">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="w-4 h-4 p-0.5 text-green-400 transition-all"
>
<path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" />
</svg>
</svg>
</div>
<span class="ml-1.5">Line Numbers</span>
</button>
</div>

<div class="flex-none">
<svg
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"
>
<g>
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"
>
<g>
<path
fill="#EBCB8B"
d="M8.495,3.628c0,0-3.556,1.322-5.656,6.294l11.585-2.19L8.495,3.628z"
/>
<path
fill="#A3BE8C"
d="M2.664,10.631c0,0-1.568,3.455,0.481,8.448l6.612-9.763L2.664,10.631z"
/>
<path
fill="#8FBCBB"
d="M3.588,19.571c0,0,1.322,3.556,6.294,5.656L7.693,13.64L3.588,19.571z"
/>
<path
fill="#88C0D0"
d="M10.591,25.401c0,0,3.455,1.567,8.448-0.481l-9.763-6.61L10.591,25.401z"
/>
<path
fill="#81A1C1"
d="M19.722,24.629c0,0,3.557-1.322,5.656-6.296l-11.586,2.189L19.722,24.629z"
/>
<path
fill="#B48EAD"
d="M25.071,9.177l-6.61,9.763l7.093-1.316C25.554,17.625,27.12,14.17,25.071,9.177z"
/>
<path
fill="#BF616A"
d="M24.628,8.685c0,0-1.322-3.556-6.295-5.655l2.189,11.585L24.628,8.685z"
/>
<path
fill="#D08770"
d="M17.624,2.855c0,0-3.453-1.568-8.447,0.482l9.764,6.61L17.624,2.855z"
/>
<path
fill="#4C566A"
d="
<g>
<path
fill="#EBCB8B"
d="M8.495,3.628c0,0-3.556,1.322-5.656,6.294l11.585-2.19L8.495,3.628z"
/>
<path
fill="#A3BE8C"
d="M2.664,10.631c0,0-1.568,3.455,0.481,8.448l6.612-9.763L2.664,10.631z"
/>
<path
fill="#8FBCBB"
d="M3.588,19.571c0,0,1.322,3.556,6.294,5.656L7.693,13.64L3.588,19.571z"
/>
<path
fill="#88C0D0"
d="M10.591,25.401c0,0,3.455,1.567,8.448-0.481l-9.763-6.61L10.591,25.401z"
/>
<path
fill="#81A1C1"
d="M19.722,24.629c0,0,3.557-1.322,5.656-6.296l-11.586,2.189L19.722,24.629z"
/>
<path
fill="#B48EAD"
d="M25.071,9.177l-6.61,9.763l7.093-1.316C25.554,17.625,27.12,14.17,25.071,9.177z"
/>
<path
fill="#BF616A"
d="M24.628,8.685c0,0-1.322-3.556-6.295-5.655l2.189,11.585L24.628,8.685z"
/>
<path
fill="#D08770"
d="M17.624,2.855c0,0-3.453-1.568-8.447,0.482l9.764,6.61L17.624,2.855z"
/>
<path
fill="#4C566A"
d="
M14.151,0C6.336,0,0,6.336,0,14.15C0,21.963,6.335,28.3,14.151,28.3
c7.813,0,14.149-6.338,14.149-14.15C28.301,6.336,21.965,0,14.151,0z M14.151,27.206c-7.199,0-13.057-5.857-13.057-13.056
S6.952,1.094,14.151,1.094c7.197,0,13.055,5.857,13.055,13.056C27.206,21.349,21.348,27.206,14.151,27.206z
"
/>
/>
</g>
</g>
</g>
</svg>
</svg>
</div>

<div id="rightPanel" class="w-full flex-1 flex space-x-2">
<button id="secondMainBtn" class=" py-2 px-4 bg-gray-800 rounded-md hover:bg-gray-700 transition-all active:scale-95">
<button
id="secondMainBtn"
class="py-2 px-4 bg-gray-800 rounded-md hover:bg-gray-700 transition-all active:scale-95"
>
Copy
</button>

<button id="modeChangeBtn" class=" py-2 px-4 bg-gray-800 rounded-md hover:bg-gray-700 transition-all active:scale-95">
<button
id="modeChangeBtn"
class="py-2 px-4 bg-gray-800 rounded-md hover:bg-gray-700 transition-all active:scale-95"
>
Simple Mode
</button>
</div>
</div>

<div class="flex-1 w-full overflow-auto flex justify-center p-0">
<!-- <div class="w-full p-3 flex space-x-2" id="fw-panel"> -->
<!-- <span id="fw-span" class="block p-2 bg-gray-800 rounded-md w-48 text-white">0px</span> -->
<!-- <input id="fw-input" class="p-2 bg-gray-800 rounded-md w-48" placeholder="Fixed Width (px)">
<!-- <span id="fw-span" class="block p-2 bg-gray-800 rounded-md w-48 text-white">0px</span> -->
<!-- <input id="fw-input" class="p-2 bg-gray-800 rounded-md w-48" placeholder="Fixed Width (px)">
<button id="fw-btn" class="rounded-md p-2 bg-gray-600 hover:bg-gray-400 transition-all">clear</button> -->
<!-- </div> -->

<div id="snippet-scroll">
<div id="snippet-container">
<div id="window">
Expand All @@ -134,9 +159,8 @@
</div>
</div>
</div>

<div id="flash-fx"></div>

<div id="flash-fx"></div>
</div>
</body>
</html>
50 changes: 22 additions & 28 deletions webview/src/code.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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(/&nbsp;/ig, "");
lineCode1.innerHTML = row.innerHTML.replace(/&nbsp;/gi, '');
lineCodeDiv.appendChild(lineCode1);
} else {
const lineCode = document.createElement('span');
Expand Down
Loading