The Problem
When working with GitHub, I frequently found myself copying and pasting code snippets into comment sections. However, I kept running into an annoying issue: the code I copied from my editor came with its original indentation, making it look messy and hard to read in GitHub comments, especially with deeply nested code.
The Solution
I created a simple JavaScript snippet that automatically fixes indentation when pasting code into GitHub comments:
// Function to fix code indentation
function fixIndentation(code) {
// Split the code into lines
const lines = code.split("\n")
// Find the minimum indentation level (excluding empty lines)
const minIndent = lines
.filter((line) => line.trim().length > 0)
.reduce((min, line) => {
const indent = line.match(/^\s*/)[0].length
return indent < min ? indent : min
}, Infinity)
// Remove the minimum indentation from all lines
const fixedLines = lines.map((line) => {
if (line.trim().length === 0) return ""
return line.slice(minIndent)
})
// Join the lines back together
return fixedLines.join("\n")
}
// Function to handle the paste event
async function handlePaste(e) {
// Prevent the default paste
e.preventDefault()
try {
// Get the clipboard content
const text = await navigator.clipboard.readText()
// Fix the indentation
const fixedText = fixIndentation(text)
// Get the target element
const target = e.target
// Get the current cursor position
const startPos = target.selectionStart
const endPos = target.selectionEnd
// Get the current value
const currentValue = target.value
// Create the new value by combining the parts
const newValue =
currentValue.substring(0, startPos) +
fixedText +
currentValue.substring(endPos)
// Set the new value
target.value = newValue
// Set the cursor position after the pasted text
target.selectionStart = target.selectionEnd = startPos + fixedText.length
} catch (error) {
console.error("Failed to access clipboard:", error)
}
}
// Add the paste event listener
document.addEventListener("paste", handlePaste)
Note
This script works with any GitHub comment box, including:
- Issue comments
- Pull request reviews
- Discussion posts
- Gist comments
How to Use It
- Install Violentmonkey extensions.
- After installing the extensions you can click on violentmonkey and create new script.
- You can copy the script from above or find whole script here GitHub Gist.
- Save the script, and that’s all. When every you paste code into GitHub comment you wil have fixed indentation.
Why This Matters
This small solution saves time and makes code discussions on GitHub much more readable. It’s particularly useful when:
- Reviewing pull requests
- Providing code examples in issues
- Sharing code snippets in discussions
- Working with deeply nested code structures