Add Line Numbers Tool<\/title>\n <style>\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n\n .gp-add-line-numbers-tool {\n font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n background-color: #f5f5f5;\n min-height: 100vh;\n padding: 20px;\n }\n\n .gp-add-line-numbers-container {\n max-width: 1200px;\n margin: 0 auto;\n }\n\n .gp-add-line-numbers-header {\n background: white;\n padding: 25px;\n border-radius: 12px;\n box-shadow: 0 2px 10px rgba(0,0,0,0.1);\n margin-bottom: 20px;\n display: flex;\n align-items: center;\n gap: 20px;\n }\n\n .gp-add-line-numbers-icon {\n width: 80px;\n height: 80px;\n background: linear-gradient(135deg, #4285f4, #1a73e8);\n border-radius: 16px;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 28px;\n font-weight: 900;\n color: white;\n flex-shrink: 0;\n }\n\n .gp-add-line-numbers-title-section h1 {\n font-size: 32px;\n color: #000;\n font-weight: 900;\n margin-bottom: 8px;\n }\n\n .gp-add-line-numbers-title-section p {\n font-size: 18px;\n color: #000;\n font-weight: 700;\n }\n\n .gp-add-line-numbers-main {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 20px;\n margin-bottom: 20px;\n }\n\n .gp-add-line-numbers-section {\n background: white;\n border-radius: 12px;\n padding: 25px;\n box-shadow: 0 2px 10px rgba(0,0,0,0.1);\n height: fit-content;\n }\n\n .gp-add-line-numbers-section h2 {\n font-size: 20px;\n color: #000;\n font-weight: 900;\n margin-bottom: 15px;\n display: flex;\n align-items: center;\n gap: 10px;\n }\n\n .gp-add-line-numbers-textarea {\n width: 100%;\n height: 300px;\n border: 2px solid #e0e0e0;\n border-radius: 8px;\n padding: 15px;\n font-family: 'Segoe UI', monospace;\n font-size: 14px;\n font-weight: 700;\n color: #000;\n resize: vertical;\n transition: border-color 0.3s ease;\n line-height: 1.5;\n }\n\n .gp-add-line-numbers-textarea:focus {\n outline: none;\n border-color: #4285f4;\n }\n\n .gp-add-line-numbers-controls {\n margin-top: 15px;\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n gap: 15px;\n }\n\n .gp-add-line-numbers-control-group {\n display: flex;\n flex-direction: column;\n gap: 8px;\n }\n\n .gp-add-line-numbers-control-row {\n display: flex;\n align-items: center;\n gap: 8px;\n }\n\n .gp-add-line-numbers-control-row label {\n font-weight: 700;\n color: #000;\n font-size: 14px;\n min-width: 80px;\n }\n\n .gp-add-line-numbers-input {\n padding: 8px 12px;\n border: 2px solid #e0e0e0;\n border-radius: 6px;\n font-family: 'Segoe UI', sans-serif;\n font-weight: 700;\n color: #000;\n background: white;\n width: 80px;\n }\n\n .gp-add-line-numbers-select {\n padding: 8px 12px;\n border: 2px solid #e0e0e0;\n border-radius: 6px;\n font-family: 'Segoe UI', sans-serif;\n font-weight: 700;\n color: #000;\n background: white;\n cursor: pointer;\n flex: 1;\n }\n\n .gp-add-line-numbers-checkbox-group {\n display: flex;\n align-items: center;\n gap: 8px;\n }\n\n .gp-add-line-numbers-checkbox-group input[type=\"checkbox\"] {\n width: 18px;\n height: 18px;\n cursor: pointer;\n }\n\n .gp-add-line-numbers-checkbox-group label {\n font-weight: 700;\n color: #000;\n cursor: pointer;\n font-size: 14px;\n min-width: auto;\n }\n\n .gp-add-line-numbers-button {\n background: #000;\n color: white;\n border: none;\n padding: 12px 20px;\n border-radius: 8px;\n font-family: 'Segoe UI', sans-serif;\n font-weight: 700;\n font-size: 14px;\n cursor: pointer;\n transition: all 0.3s ease;\n display: flex;\n align-items: center;\n gap: 8px;\n justify-content: center;\n }\n\n .gp-add-line-numbers-button:hover {\n background: #333;\n transform: translateY(-2px);\n box-shadow: 0 4px 12px rgba(0,0,0,0.2);\n }\n\n .gp-add-line-numbers-button:active {\n transform: translateY(0);\n }\n\n .gp-add-line-numbers-button.secondary {\n background: #666;\n }\n\n .gp-add-line-numbers-button.secondary:hover {\n background: #555;\n }\n\n .gp-add-line-numbers-actions {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));\n gap: 12px;\n margin-top: 15px;\n }\n\n .gp-add-line-numbers-stats {\n background: white;\n border-radius: 12px;\n padding: 25px;\n box-shadow: 0 2px 10px rgba(0,0,0,0.1);\n margin-bottom: 20px;\n }\n\n .gp-add-line-numbers-stats h2 {\n font-size: 20px;\n color: #000;\n font-weight: 900;\n margin-bottom: 15px;\n }\n\n .gp-add-line-numbers-stats-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));\n gap: 20px;\n }\n\n .gp-add-line-numbers-stat {\n text-align: center;\n }\n\n .gp-add-line-numbers-stat-number {\n font-size: 32px;\n font-weight: 900;\n color: #D97757;\n display: block;\n margin-bottom: 5px;\n transition: all 0.3s ease;\n }\n\n .gp-add-line-numbers-stat-label {\n font-size: 14px;\n font-weight: 900;\n color: #000;\n }\n\n .gp-add-line-numbers-description {\n background: #CBCADC;\n border-left: 4px solid #D97757;\n padding: 20px;\n border-radius: 8px;\n margin-bottom: 20px;\n }\n\n .gp-add-line-numbers-description h3 {\n font-size: 18px;\n color: #000;\n font-weight: 900;\n margin-bottom: 10px;\n }\n\n .gp-add-line-numbers-description p {\n font-size: 14px;\n color: #000;\n font-weight: 700;\n line-height: 1.5;\n }\n\n .gp-add-line-numbers-history {\n background: white;\n border-radius: 12px;\n padding: 25px;\n box-shadow: 0 2px 10px rgba(0,0,0,0.1);\n margin-bottom: 20px;\n }\n\n .gp-add-line-numbers-history h2 {\n font-size: 20px;\n color: #000;\n font-weight: 900;\n margin-bottom: 15px;\n }\n\n .gp-add-line-numbers-history-item {\n background: #f8f9fa;\n border: 1px solid #e0e0e0;\n border-radius: 6px;\n padding: 12px;\n margin-bottom: 10px;\n display: flex;\n justify-content: space-between;\n align-items: center;\n }\n\n .gp-add-line-numbers-history-text {\n font-size: 14px;\n color: #000;\n font-weight: 700;\n flex: 1;\n }\n\n .gp-add-line-numbers-history-restore {\n background: #4285f4;\n color: white;\n border: none;\n padding: 6px 12px;\n border-radius: 4px;\n font-weight: 700;\n font-size: 12px;\n cursor: pointer;\n }\n\n .gp-add-line-numbers-toast {\n position: fixed;\n top: 20px;\n right: 20px;\n background: #000;\n color: white;\n padding: 12px 20px;\n border-radius: 8px;\n font-weight: 700;\n z-index: 1000;\n transform: translateX(400px);\n transition: transform 0.3s ease;\n }\n\n .gp-add-line-numbers-toast.show {\n transform: translateX(0);\n }\n\n .gp-add-line-numbers-pulse {\n animation: pulse 0.5s ease-in-out;\n }\n\n @keyframes pulse {\n 0% { transform: scale(1); }\n 50% { transform: scale(1.1); }\n 100% { transform: scale(1); }\n }\n\n .gp-add-line-numbers-preview {\n background: #f8f9fa;\n border: 1px solid #e0e0e0;\n border-radius: 6px;\n padding: 15px;\n margin-top: 15px;\n font-family: 'Segoe UI', monospace;\n font-size: 12px;\n font-weight: 700;\n color: #000;\n max-height: 150px;\n overflow-y: auto;\n white-space: pre-wrap;\n }\n\n \/* Mobile Responsive *\/\n @media (max-width: 768px) {\n .gp-add-line-numbers-tool {\n padding: 15px;\n }\n\n .gp-add-line-numbers-header {\n flex-direction: column;\n text-align: center;\n padding: 20px;\n }\n\n .gp-add-line-numbers-title-section h1 {\n font-size: 24px;\n }\n\n .gp-add-line-numbers-title-section p {\n font-size: 16px;\n }\n\n .gp-add-line-numbers-main {\n grid-template-columns: 1fr;\n gap: 15px;\n }\n\n .gp-add-line-numbers-section {\n padding: 20px;\n }\n\n .gp-add-line-numbers-textarea {\n height: 250px;\n }\n\n .gp-add-line-numbers-stats-grid {\n grid-template-columns: repeat(2, 1fr);\n gap: 15px;\n }\n\n .gp-add-line-numbers-actions {\n grid-template-columns: 1fr;\n }\n\n .gp-add-line-numbers-controls {\n grid-template-columns: 1fr;\n }\n\n .gp-add-line-numbers-control-row {\n flex-direction: column;\n align-items: stretch;\n gap: 5px;\n }\n\n .gp-add-line-numbers-control-row label {\n min-width: auto;\n }\n }\n <\/style>\n<\/head>\n<body>\n <div class=\"gp-add-line-numbers-tool\">\n <div class=\"gp-add-line-numbers-container\">\n \n <div class=\"gp-add-line-numbers-header\">\n <div class=\"gp-add-line-numbers-icon\">1#<\/div>\n <div class=\"gp-add-line-numbers-title-section\">\n <h1>Add Line Numbers<\/h1>\n <p>Automatically add customizable line numbers to any text with advanced formatting options<\/p>\n <\/div>\n <\/div>\n\n \n <div class=\"gp-add-line-numbers-description\" id=\"descriptionBox\">\n <h3>Pro Tip<\/h3>\n <p id=\"rotatingTip\">Perfect for code documentation, poetry formatting, legal documents, and any text requiring line references.<\/p>\n <\/div>\n\n \n <div class=\"gp-add-line-numbers-main\">\n \n <div class=\"gp-add-line-numbers-section\">\n <h2>\ud83d\udcdd Input Text<\/h2>\n <textarea \n class=\"gp-add-line-numbers-textarea\" \n id=\"inputText\" \n placeholder=\"Enter your text here...\nEach line will be numbered according to your settings.\n\nExample:\nThis is line one\nThis is line two\nThis is line three\"\n ><\/textarea>\n \n <div class=\"gp-add-line-numbers-controls\">\n <div class=\"gp-add-line-numbers-control-group\">\n <div class=\"gp-add-line-numbers-control-row\">\n <label for=\"startNumber\">Start:<\/label>\n <input type=\"number\" class=\"gp-add-line-numbers-input\" id=\"startNumber\" value=\"1\" min=\"0\">\n <\/div>\n <div class=\"gp-add-line-numbers-control-row\">\n <label for=\"increment\">Step:<\/label>\n <input type=\"number\" class=\"gp-add-line-numbers-input\" id=\"increment\" value=\"1\" min=\"1\">\n <\/div>\n <\/div>\n \n <div class=\"gp-add-line-numbers-control-group\">\n <div class=\"gp-add-line-numbers-control-row\">\n <label for=\"numberFormat\">Format:<\/label>\n <select class=\"gp-add-line-numbers-select\" id=\"numberFormat\">\n <option value=\"decimal\">1, 2, 3…<\/option>\n <option value=\"padded\">01, 02, 03…<\/option>\n <option value=\"roman\">I, II, III…<\/option>\n <option value=\"alpha\">A, B, C…<\/option>\n <option value=\"alpha-lower\">a, b, c…<\/option>\n <\/select>\n <\/div>\n <div class=\"gp-add-line-numbers-control-row\">\n <label for=\"separator\">After:<\/label>\n <select class=\"gp-add-line-numbers-select\" id=\"separator\">\n <option value=\". \">. (dot space)<\/option>\n <option value=\") \">) (paren space)<\/option>\n <option value=\": \">: (colon space)<\/option>\n <option value=\" - \"> – (dash space)<\/option>\n <option value=\"\\t\">\\t (tab)<\/option>\n <option value=\" | \"> | (pipe)<\/option>\n <\/select>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"gp-add-line-numbers-controls\">\n <div class=\"gp-add-line-numbers-checkbox-group\">\n <input type=\"checkbox\" id=\"skipEmpty\">\n <label for=\"skipEmpty\">Skip Empty Lines<\/label>\n <\/div>\n <div class=\"gp-add-line-numbers-checkbox-group\">\n <input type=\"checkbox\" id=\"addPrefix\">\n <label for=\"addPrefix\">Add Prefix<\/label>\n <\/div>\n <div class=\"gp-add-line-numbers-checkbox-group\">\n <input type=\"checkbox\" id=\"rightAlign\">\n <label for=\"rightAlign\">Right Align Numbers<\/label>\n <\/div>\n <div class=\"gp-add-line-numbers-checkbox-group\">\n <input type=\"checkbox\" id=\"removeExisting\" checked>\n <label for=\"removeExisting\">Remove Existing Numbers<\/label>\n <\/div>\n <\/div>\n\n <div class=\"gp-add-line-numbers-control-row\" style=\"margin-top: 10px;\">\n <label for=\"prefixText\">Prefix Text:<\/label>\n <input type=\"text\" class=\"gp-add-line-numbers-select\" id=\"prefixText\" placeholder=\"Line \" style=\"width: 100%;\">\n <\/div>\n\n <div class=\"gp-add-line-numbers-actions\">\n <button class=\"gp-add-line-numbers-button\" onclick=\"addLineNumbers()\">\n \ud83d\udd22 Add Numbers\n <\/button>\n <button class=\"gp-add-line-numbers-button secondary\" onclick=\"clearInput()\">\n \ud83d\uddd1\ufe0f Clear\n <\/button>\n <button class=\"gp-add-line-numbers-button secondary\" onclick=\"undoAction()\">\n \u21b6 Undo\n <\/button>\n <button class=\"gp-add-line-numbers-button secondary\" onclick=\"redoAction()\">\n \u21b7 Redo\n <\/button>\n <\/div>\n\n \n <div class=\"gp-add-line-numbers-preview\" id=\"livePreview\">\n Live preview will appear here…\n <\/div>\n <\/div>\n\n \n <div class=\"gp-add-line-numbers-section\">\n <h2>\u2705 Numbered Output<\/h2>\n <textarea \n class=\"gp-add-line-numbers-textarea\" \n id=\"outputText\" \n readonly\n placeholder=\"Your numbered text will appear here...\"\n ><\/textarea>\n\n <div class=\"gp-add-line-numbers-actions\">\n <button class=\"gp-add-line-numbers-button\" onclick=\"copyToClipboard()\">\n \ud83d\udccb Copy to Clipboard\n <\/button>\n <button class=\"gp-add-line-numbers-button secondary\" onclick=\"downloadResult()\">\n \ud83d\udcbe Download\n <\/button>\n <button class=\"gp-add-line-numbers-button secondary\" onclick=\"copyToInput()\">\n \u2b05\ufe0f Copy to Input\n <\/button>\n <button class=\"gp-add-line-numbers-button secondary\" onclick=\"removeNumbers()\">\n \u274c Remove Numbers\n <\/button>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"gp-add-line-numbers-stats\">\n <h2>\ud83d\udcca Statistics<\/h2>\n <div class=\"gp-add-line-numbers-stats-grid\">\n <div class=\"gp-add-line-numbers-stat\">\n <span class=\"gp-add-line-numbers-stat-number\" id=\"totalLines\">0<\/span>\n <span class=\"gp-add-line-numbers-stat-label\">Total Lines<\/span>\n <\/div>\n <div class=\"gp-add-line-numbers-stat\">\n <span class=\"gp-add-line-numbers-stat-number\" id=\"numberedLines\">0<\/span>\n <span class=\"gp-add-line-numbers-stat-label\">Numbered Lines<\/span>\n <\/div>\n <div class=\"gp-add-line-numbers-stat\">\n <span class=\"gp-add-line-numbers-stat-number\" id=\"emptyLines\">0<\/span>\n <span class=\"gp-add-line-numbers-stat-label\">Empty Lines<\/span>\n <\/div>\n <div class=\"gp-add-line-numbers-stat\">\n <span class=\"gp-add-line-numbers-stat-number\" id=\"totalChars\">0<\/span>\n <span class=\"gp-add-line-numbers-stat-label\">Characters<\/span>\n <\/div>\n <div class=\"gp-add-line-numbers-stat\">\n <span class=\"gp-add-line-numbers-stat-number\" id=\"addedChars\">0<\/span>\n <span class=\"gp-add-line-numbers-stat-label\">Added Chars<\/span>\n <\/div>\n <div class=\"gp-add-line-numbers-stat\">\n <span class=\"gp-add-line-numbers-stat-number\" id=\"finalNumber\">0<\/span>\n <span class=\"gp-add-line-numbers-stat-label\">Final Number<\/span>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"gp-add-line-numbers-history\">\n <h2>\ud83d\udcda Operation History<\/h2>\n <div id=\"historyContainer\">\n <p style=\"color: #000; font-weight: 700; text-align: center; padding: 20px;\">No operations performed yet<\/p>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"gp-add-line-numbers-toast\" id=\"toast\"><\/div>\n <\/div>\n\n <script>\n \/\/ Global variables\n let history = [];\n let historyIndex = -1;\n let operationHistory = [];\n \n \/\/ Rotating tips\n const tips = [\n \"Perfect for code documentation, poetry formatting, legal documents, and any text requiring line references.\",\n \"Use different number formats like Roman numerals for formal documents or letters for outlines.\",\n \"Skip empty lines option keeps your formatting clean while only numbering content lines.\",\n \"Right align numbers for better visual consistency when dealing with varying line lengths.\",\n \"Custom prefixes like 'Line ' or 'Step ' make your numbered lists more descriptive.\",\n \"Remove existing numbers feature helps clean up pre-numbered text before re-numbering.\",\n \"Different separators like colons (:) or dashes (-) can match your document style.\",\n \"Use increments other than 1 for numbering by 5s, 10s, or any custom step size.\"\n ];\n \n let currentTipIndex = 0;\n \n \/\/ Rotate tips every 5 seconds\n setInterval(() => {\n currentTipIndex = (currentTipIndex + 1) % tips.length;\n document.getElementById('rotatingTip').textContent = tips[currentTipIndex];\n }, 5000);\n\n \/\/ Initialize\n document.addEventListener('DOMContentLoaded', function() {\n const inputText = document.getElementById('inputText');\n inputText.addEventListener('input', updateStats);\n inputText.addEventListener('input', debounce(updateLivePreview, 300));\n \n \/\/ Add event listeners for all controls\n ['startNumber', 'increment', 'numberFormat', 'separator', 'skipEmpty', 'addPrefix', 'rightAlign', 'removeExisting', 'prefixText'].forEach(id => {\n const element = document.getElementById(id);\n if (element) {\n element.addEventListener('change', updateLivePreview);\n element.addEventListener('input', debounce(updateLivePreview, 300));\n }\n });\n \n \/\/ Load sample data\n inputText.value = `This is the first line of text\nThis is the second line\nHere's another line\n\nThis line comes after an empty line\nFinal line of the example`;\n updateStats();\n updateLivePreview();\n });\n\n \/\/ Debounce function\n function debounce(func, wait) {\n let timeout;\n return function executedFunction(...args) {\n const later = () => {\n clearTimeout(timeout);\n func(...args);\n };\n clearTimeout(timeout);\n timeout = setTimeout(later, wait);\n };\n }\n\n \/\/ Convert number to different formats\n function formatNumber(num, format, totalLines) {\n switch (format) {\n case 'decimal':\n return num.toString();\n case 'padded':\n const padding = totalLines.toString().length;\n return num.toString().padStart(padding, '0');\n case 'roman':\n return toRoman(num);\n case 'alpha':\n return toAlpha(num, true);\n case 'alpha-lower':\n return toAlpha(num, false);\n default:\n return num.toString();\n }\n }\n\n \/\/ Convert to Roman numerals\n function toRoman(num) {\n const values = [1000, 900, 500, 400, 100, 90, 50, 40, 10, 9, 5, 4, 1];\n const numerals = ['M', 'CM', 'D', 'CD', 'C', 'XC', 'L', 'XL', 'X', 'IX', 'V', 'IV', 'I'];\n let result = '';\n for (let i = 0; i < values.length; i++) {\n while (num >= values[i]) {\n result += numerals[i];\n num -= values[i];\n }\n }\n return result;\n }\n\n \/\/ Convert to alphabetical\n function toAlpha(num, uppercase) {\n let result = '';\n while (num > 0) {\n num--;\n const charCode = (num % 26) + (uppercase ? 65 : 97);\n result = String.fromCharCode(charCode) + result;\n num = Math.floor(num \/ 26);\n }\n return result || (uppercase ? 'A' : 'a');\n }\n\n \/\/ Remove existing line numbers\n function removeExistingNumbers(text) {\n return text.split('\\n').map(line => {\n \/\/ Remove various number formats at the beginning of lines\n return line.replace(\/^\\s*(?:\\d+|[ivxlcdm]+|[a-zA-Z]+)[\\.\\)\\:\\-\\|\\s]+\/i, '');\n }).join('\\n');\n }\n\n \/\/ Update live preview\n function updateLivePreview() {\n const inputText = document.getElementById('inputText').value;\n if (!inputText.trim()) {\n document.getElementById('livePreview').textContent = 'Live preview will appear here...';\n return;\n }\n\n const result = processText(inputText, true);\n const lines = result.split('\\n');\n const previewLines = lines.slice(0, 5); \/\/ Show first 5 lines\n \n let preview = previewLines.join('\\n');\n if (lines.length > 5) {\n preview += '\\n... (' + (lines.length - 5) + ' more lines)';\n }\n \n document.getElementById('livePreview').textContent = preview;\n }\n\n \/\/ Main processing function\n function processText(inputText, isPreview = false) {\n if (!inputText.trim()) return '';\n\n let lines = inputText.split('\\n');\n \n \/\/ Remove existing numbers if option is checked\n if (document.getElementById('removeExisting').checked) {\n lines = lines.map(line => line.replace(\/^\\s*(?:\\d+|[ivxlcdm]+|[a-zA-Z]+)[\\.\\)\\:\\-\\|\\s]+\/i, ''));\n }\n\n const startNumber = parseInt(document.getElementById('startNumber').value) || 1;\n const increment = parseInt(document.getElementById('increment').value) || 1;\n const numberFormat = document.getElementById('numberFormat').value;\n const separator = document.getElementById('separator').value.replace('\\\\t', '\\t');\n const skipEmpty = document.getElementById('skipEmpty').checked;\n const addPrefix = document.getElementById('addPrefix').checked;\n const rightAlign = document.getElementById('rightAlign').checked;\n const prefixText = document.getElementById('prefixText').value;\n\n let currentNumber = startNumber;\n let numberedLinesCount = 0;\n const totalLinesToNumber = skipEmpty ? lines.filter(line => line.trim() !== '').length : lines.length;\n\n const processedLines = lines.map(line => {\n if (skipEmpty && line.trim() === '') {\n return line;\n }\n\n const formattedNumber = formatNumber(currentNumber, numberFormat, totalLinesToNumber);\n let numberPrefix = '';\n \n if (addPrefix && prefixText) {\n numberPrefix = prefixText;\n }\n\n let numberedLine;\n if (rightAlign) {\n const maxWidth = formatNumber(startNumber + (totalLinesToNumber - 1) * increment, numberFormat, totalLinesToNumber).length;\n const paddedNumber = formattedNumber.padStart(maxWidth, ' ');\n numberedLine = numberPrefix + paddedNumber + separator + line;\n } else {\n numberedLine = numberPrefix + formattedNumber + separator + line;\n }\n\n currentNumber += increment;\n numberedLinesCount++;\n return numberedLine;\n });\n\n return processedLines.join('\\n');\n }\n\n \/\/ Add line numbers\n function addLineNumbers() {\n const inputText = document.getElementById('inputText').value;\n const outputText = document.getElementById('outputText');\n \n if (!inputText.trim()) {\n outputText.value = '';\n updateStats();\n showToast('Please enter some text first!', 'error');\n return;\n }\n\n \/\/ Save to history\n saveToHistory(inputText);\n \n const result = processText(inputText);\n outputText.value = result;\n updateStats();\n \n \/\/ Add to operation history\n const lines = inputText.split('\\n');\n const resultLines = result.split('\\n');\n const startNumber = parseInt(document.getElementById('startNumber').value) || 1;\n const numberFormat = document.getElementById('numberFormat').value;\n \n const operation = {\n type: `Add ${numberFormat} numbers (start: ${startNumber})`,\n timestamp: new Date().toLocaleTimeString(),\n inputLines: lines.length,\n outputLines: resultLines.length,\n originalText: inputText\n };\n addToOperationHistory(operation);\n \n showToast('Line numbers added successfully!');\n }\n\n \/\/ Remove line numbers\n function removeNumbers() {\n const outputText = document.getElementById('outputText').value;\n if (!outputText.trim()) {\n showToast('No output text to process!', 'error');\n return;\n }\n\n const cleanedText = removeExistingNumbers(outputText);\n document.getElementById('inputText').value = cleanedText;\n document.getElementById('outputText').value = '';\n updateStats();\n updateLivePreview();\n \n showToast('Line numbers removed!');\n }\n\n \/\/ Update statistics\n function updateStats() {\n const inputText = document.getElementById('inputText').value;\n const outputText = document.getElementById('outputText').value;\n \n const inputLines = inputText ? inputText.split('\\n') : [];\n const outputLines = outputText ? outputText.split('\\n') : [];\n \n const nonEmptyInputLines = inputLines.filter(line => line.trim() !== '');\n const emptyLines = inputLines.length - nonEmptyInputLines.length;\n const skipEmpty = document.getElementById('skipEmpty').checked;\n const startNumber = parseInt(document.getElementById('startNumber').value) || 1;\n const increment = parseInt(document.getElementById('increment').value) || 1;\n \n const linesToNumber = skipEmpty ? nonEmptyInputLines.length : inputLines.length;\n const finalNumber = linesToNumber > 0 ? startNumber + (linesToNumber - 1) * increment : 0;\n \n const inputChars = inputText.length;\n const outputChars = outputText.length;\n const addedChars = outputChars - inputChars;\n \n \/\/ Animate number changes\n animateNumber('totalLines', inputLines.length);\n animateNumber('numberedLines', linesToNumber);\n animateNumber('emptyLines', emptyLines);\n animateNumber('totalChars', inputChars);\n animateNumber('addedChars', Math.max(0, addedChars));\n animateNumber('finalNumber', finalNumber);\n }\n\n \/\/ Animate number changes\n function animateNumber(elementId, newValue) {\n const element = document.getElementById(elementId);\n const currentValue = parseInt(element.textContent) || 0;\n \n if (currentValue !== newValue) {\n element.classList.add('gp-add-line-numbers-pulse');\n setTimeout(() => {\n element.textContent = newValue;\n element.classList.remove('gp-add-line-numbers-pulse');\n }, 250);\n }\n }\n\n \/\/ Copy to clipboard\n async function copyToClipboard() {\n const outputText = document.getElementById('outputText').value;\n if (!outputText) {\n showToast('Nothing to copy!', 'error');\n return;\n }\n \n try {\n await navigator.clipboard.writeText(outputText);\n showToast('Copied to clipboard!');\n } catch (err) {\n \/\/ Fallback for older browsers\n const textarea = document.getElementById('outputText');\n textarea.select();\n document.execCommand('copy');\n showToast('Copied to clipboard!');\n }\n }\n\n \/\/ Download result\n function downloadResult() {\n const outputText = document.getElementById('outputText').value;\n if (!outputText) {\n showToast('Nothing to download!', 'error');\n return;\n }\n \n const blob = new Blob([outputText], { type: 'text\/plain' });\n const url = URL.createObjectURL(blob);\n const a = document.createElement('a');\n a.href = url;\n a.download = 'numbered-text.txt';\n document.body.appendChild(a);\n a.click();\n document.body.removeChild(a);\n URL.revokeObjectURL(url);\n \n showToast('File downloaded!');\n }\n\n \/\/ Copy output to input\n function copyToInput() {\n const outputText = document.getElementById('outputText').value;\n if (!outputText) {\n showToast('Nothing to copy!', 'error');\n return;\n }\n \n document.getElementById('inputText').value = outputText;\n updateStats();\n updateLivePreview();\n showToast('Copied to input!');\n }\n\n \/\/ Clear input\n function clearInput() {\n const inputText = document.getElementById('inputText');\n saveToHistory(inputText.value);\n inputText.value = '';\n document.getElementById('outputText').value = '';\n updateStats();\n updateLivePreview();\n showToast('Input cleared!');\n }\n\n \/\/ History management\n function saveToHistory(text) {\n if (text && (history.length === 0 || history[history.length - 1] !== text)) {\n history.push(text);\n historyIndex = history.length - 1;\n \n \/\/ Keep only last 20 entries\n if (history.length > 20) {\n history.shift();\n historyIndex--;\n }\n }\n }\n\n \/\/ Undo action\n function undoAction() {\n if (historyIndex > 0) {\n historyIndex--;\n document.getElementById('inputText').value = history[historyIndex];\n updateStats();\n updateLivePreview();\n showToast('Undo successful!');\n } else {\n showToast('Nothing to undo!', 'error');\n }\n }\n\n \/\/ Redo action\n function redoAction() {\n if (historyIndex < history.length - 1) {\n historyIndex++;\n document.getElementById('inputText').value = history[historyIndex];\n updateStats();\n updateLivePreview();\n showToast('Redo successful!');\n } else {\n showToast('Nothing to redo!', 'error');\n }\n }\n\n \/\/ Add to operation history\n function addToOperationHistory(operation) {\n operationHistory.unshift(operation);\n \n \/\/ Keep only last 10 operations\n if (operationHistory.length > 10) {\n operationHistory.pop();\n }\n \n updateOperationHistoryDisplay();\n }\n\n \/\/ Update operation history display\n function updateOperationHistoryDisplay() {\n const container = document.getElementById('historyContainer');\n \n if (operationHistory.length === 0) {\n container.innerHTML = '<p style=\"color: #000; font-weight: 700; text-align: center; padding: 20px;\">No operations performed yet<\/p>';\n return;\n }\n \n container.innerHTML = operationHistory.map(op => `\n <div class=\"gp-add-line-numbers-history-item\">\n <div class=\"gp-add-line-numbers-history-text\">\n ${op.type} at ${op.timestamp} (${op.inputLines} \u2192 ${op.outputLines} lines)\n <\/div>\n <button class=\"gp-add-line-numbers-history-restore\" onclick=\"restoreFromHistory('${op.originalText.replace(\/'\/g, \"\\\\'\")}')\">\n Restore\n <\/button>\n <\/div>\n `).join('');\n }\n\n \/\/ Restore from history\n function restoreFromHistory(text) {\n document.getElementById('inputText').value = text.replace(\/\\\\'\/g, \"'\");\n updateStats();\n updateLivePreview();\n showToast('Restored from history!');\n }\n\n \/\/ Show toast notification\n function showToast(message, type = 'success') {\n const toast = document.getElementById('toast');\n toast.textContent = message;\n toast.className = `gp-add-line-numbers-toast show ${type}`;\n \n setTimeout(() => {\n toast.classList.remove('show');\n }, 3000);\n }\n\n \/\/ Keyboard shortcuts\n document.addEventListener('keydown', function(e) {\n if (e.ctrlKey || e.metaKey) {\n switch (e.key) {\n case 'Enter':\n e.preventDefault();\n addLineNumbers();\n break;\n case 'z':\n if (e.shiftKey) {\n e.preventDefault();\n redoAction();\n } else {\n e.preventDefault();\n undoAction();\n }\n break;\n case 'k':\n e.preventDefault();\n clearInput();\n break;\n }\n }\n });\n <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Add Line Numbers Tool 1# Add Line Numbers Automatically add customizable line numbers to any text with advanced formatting options … <\/p>\n<p class=\"read-more-container\"><a title=\"Add Line Numbers\" class=\"read-more button\" href=\"https:\/\/vijaypandit.in\/?page_id=334#more-334\" aria-label=\"More on Add Line Numbers\">Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-334","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/vijaypandit.in\/index.php?rest_route=\/wp\/v2\/pages\/334","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/vijaypandit.in\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/vijaypandit.in\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/vijaypandit.in\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/vijaypandit.in\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=334"}],"version-history":[{"count":1,"href":"https:\/\/vijaypandit.in\/index.php?rest_route=\/wp\/v2\/pages\/334\/revisions"}],"predecessor-version":[{"id":335,"href":"https:\/\/vijaypandit.in\/index.php?rest_route=\/wp\/v2\/pages\/334\/revisions\/335"}],"wp:attachment":[{"href":"https:\/\/vijaypandit.in\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=334"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":334,"date":"2025-07-26T14:03:34","date_gmt":"2025-07-26T14:03:34","guid":{"rendered":"https:\/\/vijaypandit.in\/?page_id=334"},"modified":"2025-07-26T14:03:35","modified_gmt":"2025-07-26T14:03:35","slug":"add-line-numbers","status":"publish","type":"page","link":"https:\/\/vijaypandit.in\/?page_id=334","title":{"rendered":"Add Line Numbers"},"content":{"rendered":"\n\n\n\n \n \n Add Line Numbers Tool<\/title>\n <style>\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n\n .gp-add-line-numbers-tool {\n font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n background-color: #f5f5f5;\n min-height: 100vh;\n padding: 20px;\n }\n\n .gp-add-line-numbers-container {\n max-width: 1200px;\n margin: 0 auto;\n }\n\n .gp-add-line-numbers-header {\n background: white;\n padding: 25px;\n border-radius: 12px;\n box-shadow: 0 2px 10px rgba(0,0,0,0.1);\n margin-bottom: 20px;\n display: flex;\n align-items: center;\n gap: 20px;\n }\n\n .gp-add-line-numbers-icon {\n width: 80px;\n height: 80px;\n background: linear-gradient(135deg, #4285f4, #1a73e8);\n border-radius: 16px;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 28px;\n font-weight: 900;\n color: white;\n flex-shrink: 0;\n }\n\n .gp-add-line-numbers-title-section h1 {\n font-size: 32px;\n color: #000;\n font-weight: 900;\n margin-bottom: 8px;\n }\n\n .gp-add-line-numbers-title-section p {\n font-size: 18px;\n color: #000;\n font-weight: 700;\n }\n\n .gp-add-line-numbers-main {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 20px;\n margin-bottom: 20px;\n }\n\n .gp-add-line-numbers-section {\n background: white;\n border-radius: 12px;\n padding: 25px;\n box-shadow: 0 2px 10px rgba(0,0,0,0.1);\n height: fit-content;\n }\n\n .gp-add-line-numbers-section h2 {\n font-size: 20px;\n color: #000;\n font-weight: 900;\n margin-bottom: 15px;\n display: flex;\n align-items: center;\n gap: 10px;\n }\n\n .gp-add-line-numbers-textarea {\n width: 100%;\n height: 300px;\n border: 2px solid #e0e0e0;\n border-radius: 8px;\n padding: 15px;\n font-family: 'Segoe UI', monospace;\n font-size: 14px;\n font-weight: 700;\n color: #000;\n resize: vertical;\n transition: border-color 0.3s ease;\n line-height: 1.5;\n }\n\n .gp-add-line-numbers-textarea:focus {\n outline: none;\n border-color: #4285f4;\n }\n\n .gp-add-line-numbers-controls {\n margin-top: 15px;\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n gap: 15px;\n }\n\n .gp-add-line-numbers-control-group {\n display: flex;\n flex-direction: column;\n gap: 8px;\n }\n\n .gp-add-line-numbers-control-row {\n display: flex;\n align-items: center;\n gap: 8px;\n }\n\n .gp-add-line-numbers-control-row label {\n font-weight: 700;\n color: #000;\n font-size: 14px;\n min-width: 80px;\n }\n\n .gp-add-line-numbers-input {\n padding: 8px 12px;\n border: 2px solid #e0e0e0;\n border-radius: 6px;\n font-family: 'Segoe UI', sans-serif;\n font-weight: 700;\n color: #000;\n background: white;\n width: 80px;\n }\n\n .gp-add-line-numbers-select {\n padding: 8px 12px;\n border: 2px solid #e0e0e0;\n border-radius: 6px;\n font-family: 'Segoe UI', sans-serif;\n font-weight: 700;\n color: #000;\n background: white;\n cursor: pointer;\n flex: 1;\n }\n\n .gp-add-line-numbers-checkbox-group {\n display: flex;\n align-items: center;\n gap: 8px;\n }\n\n .gp-add-line-numbers-checkbox-group input[type=\"checkbox\"] {\n width: 18px;\n height: 18px;\n cursor: pointer;\n }\n\n .gp-add-line-numbers-checkbox-group label {\n font-weight: 700;\n color: #000;\n cursor: pointer;\n font-size: 14px;\n min-width: auto;\n }\n\n .gp-add-line-numbers-button {\n background: #000;\n color: white;\n border: none;\n padding: 12px 20px;\n border-radius: 8px;\n font-family: 'Segoe UI', sans-serif;\n font-weight: 700;\n font-size: 14px;\n cursor: pointer;\n transition: all 0.3s ease;\n display: flex;\n align-items: center;\n gap: 8px;\n justify-content: center;\n }\n\n .gp-add-line-numbers-button:hover {\n background: #333;\n transform: translateY(-2px);\n box-shadow: 0 4px 12px rgba(0,0,0,0.2);\n }\n\n .gp-add-line-numbers-button:active {\n transform: translateY(0);\n }\n\n .gp-add-line-numbers-button.secondary {\n background: #666;\n }\n\n .gp-add-line-numbers-button.secondary:hover {\n background: #555;\n }\n\n .gp-add-line-numbers-actions {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));\n gap: 12px;\n margin-top: 15px;\n }\n\n .gp-add-line-numbers-stats {\n background: white;\n border-radius: 12px;\n padding: 25px;\n box-shadow: 0 2px 10px rgba(0,0,0,0.1);\n margin-bottom: 20px;\n }\n\n .gp-add-line-numbers-stats h2 {\n font-size: 20px;\n color: #000;\n font-weight: 900;\n margin-bottom: 15px;\n }\n\n .gp-add-line-numbers-stats-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));\n gap: 20px;\n }\n\n .gp-add-line-numbers-stat {\n text-align: center;\n }\n\n .gp-add-line-numbers-stat-number {\n font-size: 32px;\n font-weight: 900;\n color: #D97757;\n display: block;\n margin-bottom: 5px;\n transition: all 0.3s ease;\n }\n\n .gp-add-line-numbers-stat-label {\n font-size: 14px;\n font-weight: 900;\n color: #000;\n }\n\n .gp-add-line-numbers-description {\n background: #CBCADC;\n border-left: 4px solid #D97757;\n padding: 20px;\n border-radius: 8px;\n margin-bottom: 20px;\n }\n\n .gp-add-line-numbers-description h3 {\n font-size: 18px;\n color: #000;\n font-weight: 900;\n margin-bottom: 10px;\n }\n\n .gp-add-line-numbers-description p {\n font-size: 14px;\n color: #000;\n font-weight: 700;\n line-height: 1.5;\n }\n\n .gp-add-line-numbers-history {\n background: white;\n border-radius: 12px;\n padding: 25px;\n box-shadow: 0 2px 10px rgba(0,0,0,0.1);\n margin-bottom: 20px;\n }\n\n .gp-add-line-numbers-history h2 {\n font-size: 20px;\n color: #000;\n font-weight: 900;\n margin-bottom: 15px;\n }\n\n .gp-add-line-numbers-history-item {\n background: #f8f9fa;\n border: 1px solid #e0e0e0;\n border-radius: 6px;\n padding: 12px;\n margin-bottom: 10px;\n display: flex;\n justify-content: space-between;\n align-items: center;\n }\n\n .gp-add-line-numbers-history-text {\n font-size: 14px;\n color: #000;\n font-weight: 700;\n flex: 1;\n }\n\n .gp-add-line-numbers-history-restore {\n background: #4285f4;\n color: white;\n border: none;\n padding: 6px 12px;\n border-radius: 4px;\n font-weight: 700;\n font-size: 12px;\n cursor: pointer;\n }\n\n .gp-add-line-numbers-toast {\n position: fixed;\n top: 20px;\n right: 20px;\n background: #000;\n color: white;\n padding: 12px 20px;\n border-radius: 8px;\n font-weight: 700;\n z-index: 1000;\n transform: translateX(400px);\n transition: transform 0.3s ease;\n }\n\n .gp-add-line-numbers-toast.show {\n transform: translateX(0);\n }\n\n .gp-add-line-numbers-pulse {\n animation: pulse 0.5s ease-in-out;\n }\n\n @keyframes pulse {\n 0% { transform: scale(1); }\n 50% { transform: scale(1.1); }\n 100% { transform: scale(1); }\n }\n\n .gp-add-line-numbers-preview {\n background: #f8f9fa;\n border: 1px solid #e0e0e0;\n border-radius: 6px;\n padding: 15px;\n margin-top: 15px;\n font-family: 'Segoe UI', monospace;\n font-size: 12px;\n font-weight: 700;\n color: #000;\n max-height: 150px;\n overflow-y: auto;\n white-space: pre-wrap;\n }\n\n \/* Mobile Responsive *\/\n @media (max-width: 768px) {\n .gp-add-line-numbers-tool {\n padding: 15px;\n }\n\n .gp-add-line-numbers-header {\n flex-direction: column;\n text-align: center;\n padding: 20px;\n }\n\n .gp-add-line-numbers-title-section h1 {\n font-size: 24px;\n }\n\n .gp-add-line-numbers-title-section p {\n font-size: 16px;\n }\n\n .gp-add-line-numbers-main {\n grid-template-columns: 1fr;\n gap: 15px;\n }\n\n .gp-add-line-numbers-section {\n padding: 20px;\n }\n\n .gp-add-line-numbers-textarea {\n height: 250px;\n }\n\n .gp-add-line-numbers-stats-grid {\n grid-template-columns: repeat(2, 1fr);\n gap: 15px;\n }\n\n .gp-add-line-numbers-actions {\n grid-template-columns: 1fr;\n }\n\n .gp-add-line-numbers-controls {\n grid-template-columns: 1fr;\n }\n\n .gp-add-line-numbers-control-row {\n flex-direction: column;\n align-items: stretch;\n gap: 5px;\n }\n\n .gp-add-line-numbers-control-row label {\n min-width: auto;\n }\n }\n <\/style>\n<\/head>\n<body>\n <div class=\"gp-add-line-numbers-tool\">\n <div class=\"gp-add-line-numbers-container\">\n \n <div class=\"gp-add-line-numbers-header\">\n <div class=\"gp-add-line-numbers-icon\">1#<\/div>\n <div class=\"gp-add-line-numbers-title-section\">\n <h1>Add Line Numbers<\/h1>\n <p>Automatically add customizable line numbers to any text with advanced formatting options<\/p>\n <\/div>\n <\/div>\n\n \n <div class=\"gp-add-line-numbers-description\" id=\"descriptionBox\">\n <h3>Pro Tip<\/h3>\n <p id=\"rotatingTip\">Perfect for code documentation, poetry formatting, legal documents, and any text requiring line references.<\/p>\n <\/div>\n\n \n <div class=\"gp-add-line-numbers-main\">\n \n <div class=\"gp-add-line-numbers-section\">\n <h2>\ud83d\udcdd Input Text<\/h2>\n <textarea \n class=\"gp-add-line-numbers-textarea\" \n id=\"inputText\" \n placeholder=\"Enter your text here...\nEach line will be numbered according to your settings.\n\nExample:\nThis is line one\nThis is line two\nThis is line three\"\n ><\/textarea>\n \n <div class=\"gp-add-line-numbers-controls\">\n <div class=\"gp-add-line-numbers-control-group\">\n <div class=\"gp-add-line-numbers-control-row\">\n <label for=\"startNumber\">Start:<\/label>\n <input type=\"number\" class=\"gp-add-line-numbers-input\" id=\"startNumber\" value=\"1\" min=\"0\">\n <\/div>\n <div class=\"gp-add-line-numbers-control-row\">\n <label for=\"increment\">Step:<\/label>\n <input type=\"number\" class=\"gp-add-line-numbers-input\" id=\"increment\" value=\"1\" min=\"1\">\n <\/div>\n <\/div>\n \n <div class=\"gp-add-line-numbers-control-group\">\n <div class=\"gp-add-line-numbers-control-row\">\n <label for=\"numberFormat\">Format:<\/label>\n <select class=\"gp-add-line-numbers-select\" id=\"numberFormat\">\n <option value=\"decimal\">1, 2, 3…<\/option>\n <option value=\"padded\">01, 02, 03…<\/option>\n <option value=\"roman\">I, II, III…<\/option>\n <option value=\"alpha\">A, B, C…<\/option>\n <option value=\"alpha-lower\">a, b, c…<\/option>\n <\/select>\n <\/div>\n <div class=\"gp-add-line-numbers-control-row\">\n <label for=\"separator\">After:<\/label>\n <select class=\"gp-add-line-numbers-select\" id=\"separator\">\n <option value=\". \">. (dot space)<\/option>\n <option value=\") \">) (paren space)<\/option>\n <option value=\": \">: (colon space)<\/option>\n <option value=\" - \"> – (dash space)<\/option>\n <option value=\"\\t\">\\t (tab)<\/option>\n <option value=\" | \"> | (pipe)<\/option>\n <\/select>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"gp-add-line-numbers-controls\">\n <div class=\"gp-add-line-numbers-checkbox-group\">\n <input type=\"checkbox\" id=\"skipEmpty\">\n <label for=\"skipEmpty\">Skip Empty Lines<\/label>\n <\/div>\n <div class=\"gp-add-line-numbers-checkbox-group\">\n <input type=\"checkbox\" id=\"addPrefix\">\n <label for=\"addPrefix\">Add Prefix<\/label>\n <\/div>\n <div class=\"gp-add-line-numbers-checkbox-group\">\n <input type=\"checkbox\" id=\"rightAlign\">\n <label for=\"rightAlign\">Right Align Numbers<\/label>\n <\/div>\n <div class=\"gp-add-line-numbers-checkbox-group\">\n <input type=\"checkbox\" id=\"removeExisting\" checked>\n <label for=\"removeExisting\">Remove Existing Numbers<\/label>\n <\/div>\n <\/div>\n\n <div class=\"gp-add-line-numbers-control-row\" style=\"margin-top: 10px;\">\n <label for=\"prefixText\">Prefix Text:<\/label>\n <input type=\"text\" class=\"gp-add-line-numbers-select\" id=\"prefixText\" placeholder=\"Line \" style=\"width: 100%;\">\n <\/div>\n\n <div class=\"gp-add-line-numbers-actions\">\n <button class=\"gp-add-line-numbers-button\" onclick=\"addLineNumbers()\">\n \ud83d\udd22 Add Numbers\n <\/button>\n <button class=\"gp-add-line-numbers-button secondary\" onclick=\"clearInput()\">\n \ud83d\uddd1\ufe0f Clear\n <\/button>\n <button class=\"gp-add-line-numbers-button secondary\" onclick=\"undoAction()\">\n \u21b6 Undo\n <\/button>\n <button class=\"gp-add-line-numbers-button secondary\" onclick=\"redoAction()\">\n \u21b7 Redo\n <\/button>\n <\/div>\n\n \n <div class=\"gp-add-line-numbers-preview\" id=\"livePreview\">\n Live preview will appear here…\n <\/div>\n <\/div>\n\n \n <div class=\"gp-add-line-numbers-section\">\n <h2>\u2705 Numbered Output<\/h2>\n <textarea \n class=\"gp-add-line-numbers-textarea\" \n id=\"outputText\" \n readonly\n placeholder=\"Your numbered text will appear here...\"\n ><\/textarea>\n\n <div class=\"gp-add-line-numbers-actions\">\n <button class=\"gp-add-line-numbers-button\" onclick=\"copyToClipboard()\">\n \ud83d\udccb Copy to Clipboard\n <\/button>\n <button class=\"gp-add-line-numbers-button secondary\" onclick=\"downloadResult()\">\n \ud83d\udcbe Download\n <\/button>\n <button class=\"gp-add-line-numbers-button secondary\" onclick=\"copyToInput()\">\n \u2b05\ufe0f Copy to Input\n <\/button>\n <button class=\"gp-add-line-numbers-button secondary\" onclick=\"removeNumbers()\">\n \u274c Remove Numbers\n <\/button>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"gp-add-line-numbers-stats\">\n <h2>\ud83d\udcca Statistics<\/h2>\n <div class=\"gp-add-line-numbers-stats-grid\">\n <div class=\"gp-add-line-numbers-stat\">\n <span class=\"gp-add-line-numbers-stat-number\" id=\"totalLines\">0<\/span>\n <span class=\"gp-add-line-numbers-stat-label\">Total Lines<\/span>\n <\/div>\n <div class=\"gp-add-line-numbers-stat\">\n <span class=\"gp-add-line-numbers-stat-number\" id=\"numberedLines\">0<\/span>\n <span class=\"gp-add-line-numbers-stat-label\">Numbered Lines<\/span>\n <\/div>\n <div class=\"gp-add-line-numbers-stat\">\n <span class=\"gp-add-line-numbers-stat-number\" id=\"emptyLines\">0<\/span>\n <span class=\"gp-add-line-numbers-stat-label\">Empty Lines<\/span>\n <\/div>\n <div class=\"gp-add-line-numbers-stat\">\n <span class=\"gp-add-line-numbers-stat-number\" id=\"totalChars\">0<\/span>\n <span class=\"gp-add-line-numbers-stat-label\">Characters<\/span>\n <\/div>\n <div class=\"gp-add-line-numbers-stat\">\n <span class=\"gp-add-line-numbers-stat-number\" id=\"addedChars\">0<\/span>\n <span class=\"gp-add-line-numbers-stat-label\">Added Chars<\/span>\n <\/div>\n <div class=\"gp-add-line-numbers-stat\">\n <span class=\"gp-add-line-numbers-stat-number\" id=\"finalNumber\">0<\/span>\n <span class=\"gp-add-line-numbers-stat-label\">Final Number<\/span>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"gp-add-line-numbers-history\">\n <h2>\ud83d\udcda Operation History<\/h2>\n <div id=\"historyContainer\">\n <p style=\"color: #000; font-weight: 700; text-align: center; padding: 20px;\">No operations performed yet<\/p>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"gp-add-line-numbers-toast\" id=\"toast\"><\/div>\n <\/div>\n\n <script>\n \/\/ Global variables\n let history = [];\n let historyIndex = -1;\n let operationHistory = [];\n \n \/\/ Rotating tips\n const tips = [\n \"Perfect for code documentation, poetry formatting, legal documents, and any text requiring line references.\",\n \"Use different number formats like Roman numerals for formal documents or letters for outlines.\",\n \"Skip empty lines option keeps your formatting clean while only numbering content lines.\",\n \"Right align numbers for better visual consistency when dealing with varying line lengths.\",\n \"Custom prefixes like 'Line ' or 'Step ' make your numbered lists more descriptive.\",\n \"Remove existing numbers feature helps clean up pre-numbered text before re-numbering.\",\n \"Different separators like colons (:) or dashes (-) can match your document style.\",\n \"Use increments other than 1 for numbering by 5s, 10s, or any custom step size.\"\n ];\n \n let currentTipIndex = 0;\n \n \/\/ Rotate tips every 5 seconds\n setInterval(() => {\n currentTipIndex = (currentTipIndex + 1) % tips.length;\n document.getElementById('rotatingTip').textContent = tips[currentTipIndex];\n }, 5000);\n\n \/\/ Initialize\n document.addEventListener('DOMContentLoaded', function() {\n const inputText = document.getElementById('inputText');\n inputText.addEventListener('input', updateStats);\n inputText.addEventListener('input', debounce(updateLivePreview, 300));\n \n \/\/ Add event listeners for all controls\n ['startNumber', 'increment', 'numberFormat', 'separator', 'skipEmpty', 'addPrefix', 'rightAlign', 'removeExisting', 'prefixText'].forEach(id => {\n const element = document.getElementById(id);\n if (element) {\n element.addEventListener('change', updateLivePreview);\n element.addEventListener('input', debounce(updateLivePreview, 300));\n }\n });\n \n \/\/ Load sample data\n inputText.value = `This is the first line of text\nThis is the second line\nHere's another line\n\nThis line comes after an empty line\nFinal line of the example`;\n updateStats();\n updateLivePreview();\n });\n\n \/\/ Debounce function\n function debounce(func, wait) {\n let timeout;\n return function executedFunction(...args) {\n const later = () => {\n clearTimeout(timeout);\n func(...args);\n };\n clearTimeout(timeout);\n timeout = setTimeout(later, wait);\n };\n }\n\n \/\/ Convert number to different formats\n function formatNumber(num, format, totalLines) {\n switch (format) {\n case 'decimal':\n return num.toString();\n case 'padded':\n const padding = totalLines.toString().length;\n return num.toString().padStart(padding, '0');\n case 'roman':\n return toRoman(num);\n case 'alpha':\n return toAlpha(num, true);\n case 'alpha-lower':\n return toAlpha(num, false);\n default:\n return num.toString();\n }\n }\n\n \/\/ Convert to Roman numerals\n function toRoman(num) {\n const values = [1000, 900, 500, 400, 100, 90, 50, 40, 10, 9, 5, 4, 1];\n const numerals = ['M', 'CM', 'D', 'CD', 'C', 'XC', 'L', 'XL', 'X', 'IX', 'V', 'IV', 'I'];\n let result = '';\n for (let i = 0; i < values.length; i++) {\n while (num >= values[i]) {\n result += numerals[i];\n num -= values[i];\n }\n }\n return result;\n }\n\n \/\/ Convert to alphabetical\n function toAlpha(num, uppercase) {\n let result = '';\n while (num > 0) {\n num--;\n const charCode = (num % 26) + (uppercase ? 65 : 97);\n result = String.fromCharCode(charCode) + result;\n num = Math.floor(num \/ 26);\n }\n return result || (uppercase ? 'A' : 'a');\n }\n\n \/\/ Remove existing line numbers\n function removeExistingNumbers(text) {\n return text.split('\\n').map(line => {\n \/\/ Remove various number formats at the beginning of lines\n return line.replace(\/^\\s*(?:\\d+|[ivxlcdm]+|[a-zA-Z]+)[\\.\\)\\:\\-\\|\\s]+\/i, '');\n }).join('\\n');\n }\n\n \/\/ Update live preview\n function updateLivePreview() {\n const inputText = document.getElementById('inputText').value;\n if (!inputText.trim()) {\n document.getElementById('livePreview').textContent = 'Live preview will appear here...';\n return;\n }\n\n const result = processText(inputText, true);\n const lines = result.split('\\n');\n const previewLines = lines.slice(0, 5); \/\/ Show first 5 lines\n \n let preview = previewLines.join('\\n');\n if (lines.length > 5) {\n preview += '\\n... (' + (lines.length - 5) + ' more lines)';\n }\n \n document.getElementById('livePreview').textContent = preview;\n }\n\n \/\/ Main processing function\n function processText(inputText, isPreview = false) {\n if (!inputText.trim()) return '';\n\n let lines = inputText.split('\\n');\n \n \/\/ Remove existing numbers if option is checked\n if (document.getElementById('removeExisting').checked) {\n lines = lines.map(line => line.replace(\/^\\s*(?:\\d+|[ivxlcdm]+|[a-zA-Z]+)[\\.\\)\\:\\-\\|\\s]+\/i, ''));\n }\n\n const startNumber = parseInt(document.getElementById('startNumber').value) || 1;\n const increment = parseInt(document.getElementById('increment').value) || 1;\n const numberFormat = document.getElementById('numberFormat').value;\n const separator = document.getElementById('separator').value.replace('\\\\t', '\\t');\n const skipEmpty = document.getElementById('skipEmpty').checked;\n const addPrefix = document.getElementById('addPrefix').checked;\n const rightAlign = document.getElementById('rightAlign').checked;\n const prefixText = document.getElementById('prefixText').value;\n\n let currentNumber = startNumber;\n let numberedLinesCount = 0;\n const totalLinesToNumber = skipEmpty ? lines.filter(line => line.trim() !== '').length : lines.length;\n\n const processedLines = lines.map(line => {\n if (skipEmpty && line.trim() === '') {\n return line;\n }\n\n const formattedNumber = formatNumber(currentNumber, numberFormat, totalLinesToNumber);\n let numberPrefix = '';\n \n if (addPrefix && prefixText) {\n numberPrefix = prefixText;\n }\n\n let numberedLine;\n if (rightAlign) {\n const maxWidth = formatNumber(startNumber + (totalLinesToNumber - 1) * increment, numberFormat, totalLinesToNumber).length;\n const paddedNumber = formattedNumber.padStart(maxWidth, ' ');\n numberedLine = numberPrefix + paddedNumber + separator + line;\n } else {\n numberedLine = numberPrefix + formattedNumber + separator + line;\n }\n\n currentNumber += increment;\n numberedLinesCount++;\n return numberedLine;\n });\n\n return processedLines.join('\\n');\n }\n\n \/\/ Add line numbers\n function addLineNumbers() {\n const inputText = document.getElementById('inputText').value;\n const outputText = document.getElementById('outputText');\n \n if (!inputText.trim()) {\n outputText.value = '';\n updateStats();\n showToast('Please enter some text first!', 'error');\n return;\n }\n\n \/\/ Save to history\n saveToHistory(inputText);\n \n const result = processText(inputText);\n outputText.value = result;\n updateStats();\n \n \/\/ Add to operation history\n const lines = inputText.split('\\n');\n const resultLines = result.split('\\n');\n const startNumber = parseInt(document.getElementById('startNumber').value) || 1;\n const numberFormat = document.getElementById('numberFormat').value;\n \n const operation = {\n type: `Add ${numberFormat} numbers (start: ${startNumber})`,\n timestamp: new Date().toLocaleTimeString(),\n inputLines: lines.length,\n outputLines: resultLines.length,\n originalText: inputText\n };\n addToOperationHistory(operation);\n \n showToast('Line numbers added successfully!');\n }\n\n \/\/ Remove line numbers\n function removeNumbers() {\n const outputText = document.getElementById('outputText').value;\n if (!outputText.trim()) {\n showToast('No output text to process!', 'error');\n return;\n }\n\n const cleanedText = removeExistingNumbers(outputText);\n document.getElementById('inputText').value = cleanedText;\n document.getElementById('outputText').value = '';\n updateStats();\n updateLivePreview();\n \n showToast('Line numbers removed!');\n }\n\n \/\/ Update statistics\n function updateStats() {\n const inputText = document.getElementById('inputText').value;\n const outputText = document.getElementById('outputText').value;\n \n const inputLines = inputText ? inputText.split('\\n') : [];\n const outputLines = outputText ? outputText.split('\\n') : [];\n \n const nonEmptyInputLines = inputLines.filter(line => line.trim() !== '');\n const emptyLines = inputLines.length - nonEmptyInputLines.length;\n const skipEmpty = document.getElementById('skipEmpty').checked;\n const startNumber = parseInt(document.getElementById('startNumber').value) || 1;\n const increment = parseInt(document.getElementById('increment').value) || 1;\n \n const linesToNumber = skipEmpty ? nonEmptyInputLines.length : inputLines.length;\n const finalNumber = linesToNumber > 0 ? startNumber + (linesToNumber - 1) * increment : 0;\n \n const inputChars = inputText.length;\n const outputChars = outputText.length;\n const addedChars = outputChars - inputChars;\n \n \/\/ Animate number changes\n animateNumber('totalLines', inputLines.length);\n animateNumber('numberedLines', linesToNumber);\n animateNumber('emptyLines', emptyLines);\n animateNumber('totalChars', inputChars);\n animateNumber('addedChars', Math.max(0, addedChars));\n animateNumber('finalNumber', finalNumber);\n }\n\n \/\/ Animate number changes\n function animateNumber(elementId, newValue) {\n const element = document.getElementById(elementId);\n const currentValue = parseInt(element.textContent) || 0;\n \n if (currentValue !== newValue) {\n element.classList.add('gp-add-line-numbers-pulse');\n setTimeout(() => {\n element.textContent = newValue;\n element.classList.remove('gp-add-line-numbers-pulse');\n }, 250);\n }\n }\n\n \/\/ Copy to clipboard\n async function copyToClipboard() {\n const outputText = document.getElementById('outputText').value;\n if (!outputText) {\n showToast('Nothing to copy!', 'error');\n return;\n }\n \n try {\n await navigator.clipboard.writeText(outputText);\n showToast('Copied to clipboard!');\n } catch (err) {\n \/\/ Fallback for older browsers\n const textarea = document.getElementById('outputText');\n textarea.select();\n document.execCommand('copy');\n showToast('Copied to clipboard!');\n }\n }\n\n \/\/ Download result\n function downloadResult() {\n const outputText = document.getElementById('outputText').value;\n if (!outputText) {\n showToast('Nothing to download!', 'error');\n return;\n }\n \n const blob = new Blob([outputText], { type: 'text\/plain' });\n const url = URL.createObjectURL(blob);\n const a = document.createElement('a');\n a.href = url;\n a.download = 'numbered-text.txt';\n document.body.appendChild(a);\n a.click();\n document.body.removeChild(a);\n URL.revokeObjectURL(url);\n \n showToast('File downloaded!');\n }\n\n \/\/ Copy output to input\n function copyToInput() {\n const outputText = document.getElementById('outputText').value;\n if (!outputText) {\n showToast('Nothing to copy!', 'error');\n return;\n }\n \n document.getElementById('inputText').value = outputText;\n updateStats();\n updateLivePreview();\n showToast('Copied to input!');\n }\n\n \/\/ Clear input\n function clearInput() {\n const inputText = document.getElementById('inputText');\n saveToHistory(inputText.value);\n inputText.value = '';\n document.getElementById('outputText').value = '';\n updateStats();\n updateLivePreview();\n showToast('Input cleared!');\n }\n\n \/\/ History management\n function saveToHistory(text) {\n if (text && (history.length === 0 || history[history.length - 1] !== text)) {\n history.push(text);\n historyIndex = history.length - 1;\n \n \/\/ Keep only last 20 entries\n if (history.length > 20) {\n history.shift();\n historyIndex--;\n }\n }\n }\n\n \/\/ Undo action\n function undoAction() {\n if (historyIndex > 0) {\n historyIndex--;\n document.getElementById('inputText').value = history[historyIndex];\n updateStats();\n updateLivePreview();\n showToast('Undo successful!');\n } else {\n showToast('Nothing to undo!', 'error');\n }\n }\n\n \/\/ Redo action\n function redoAction() {\n if (historyIndex < history.length - 1) {\n historyIndex++;\n document.getElementById('inputText').value = history[historyIndex];\n updateStats();\n updateLivePreview();\n showToast('Redo successful!');\n } else {\n showToast('Nothing to redo!', 'error');\n }\n }\n\n \/\/ Add to operation history\n function addToOperationHistory(operation) {\n operationHistory.unshift(operation);\n \n \/\/ Keep only last 10 operations\n if (operationHistory.length > 10) {\n operationHistory.pop();\n }\n \n updateOperationHistoryDisplay();\n }\n\n \/\/ Update operation history display\n function updateOperationHistoryDisplay() {\n const container = document.getElementById('historyContainer');\n \n if (operationHistory.length === 0) {\n container.innerHTML = '<p style=\"color: #000; font-weight: 700; text-align: center; padding: 20px;\">No operations performed yet<\/p>';\n return;\n }\n \n container.innerHTML = operationHistory.map(op => `\n <div class=\"gp-add-line-numbers-history-item\">\n <div class=\"gp-add-line-numbers-history-text\">\n ${op.type} at ${op.timestamp} (${op.inputLines} \u2192 ${op.outputLines} lines)\n <\/div>\n <button class=\"gp-add-line-numbers-history-restore\" onclick=\"restoreFromHistory('${op.originalText.replace(\/'\/g, \"\\\\'\")}')\">\n Restore\n <\/button>\n <\/div>\n `).join('');\n }\n\n \/\/ Restore from history\n function restoreFromHistory(text) {\n document.getElementById('inputText').value = text.replace(\/\\\\'\/g, \"'\");\n updateStats();\n updateLivePreview();\n showToast('Restored from history!');\n }\n\n \/\/ Show toast notification\n function showToast(message, type = 'success') {\n const toast = document.getElementById('toast');\n toast.textContent = message;\n toast.className = `gp-add-line-numbers-toast show ${type}`;\n \n setTimeout(() => {\n toast.classList.remove('show');\n }, 3000);\n }\n\n \/\/ Keyboard shortcuts\n document.addEventListener('keydown', function(e) {\n if (e.ctrlKey || e.metaKey) {\n switch (e.key) {\n case 'Enter':\n e.preventDefault();\n addLineNumbers();\n break;\n case 'z':\n if (e.shiftKey) {\n e.preventDefault();\n redoAction();\n } else {\n e.preventDefault();\n undoAction();\n }\n break;\n case 'k':\n e.preventDefault();\n clearInput();\n break;\n }\n }\n });\n <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Add Line Numbers Tool 1# Add Line Numbers Automatically add customizable line numbers to any text with advanced formatting options … <\/p>\n<p class=\"read-more-container\"><a title=\"Add Line Numbers\" class=\"read-more button\" href=\"https:\/\/vijaypandit.in\/?page_id=334#more-334\" aria-label=\"More on Add Line Numbers\">Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-334","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/vijaypandit.in\/index.php?rest_route=\/wp\/v2\/pages\/334","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/vijaypandit.in\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/vijaypandit.in\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/vijaypandit.in\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/vijaypandit.in\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=334"}],"version-history":[{"count":1,"href":"https:\/\/vijaypandit.in\/index.php?rest_route=\/wp\/v2\/pages\/334\/revisions"}],"predecessor-version":[{"id":335,"href":"https:\/\/vijaypandit.in\/index.php?rest_route=\/wp\/v2\/pages\/334\/revisions\/335"}],"wp:attachment":[{"href":"https:\/\/vijaypandit.in\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=334"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}