noham/Code-to-PDF
1
0
Fork 0
mirror of https://github.com/NohamR/Code-to-PDF.git synced 2026-05-25 04:07:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

Completely rearchitect the code renderer

Browse Source
This commit is contained in:
tarikjaber
2023-04-06 15:49:41 -04:00
parent 46981c68e9
commit dde86cf964
3 changed files with 123 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files

98
index.js
View File

@@ -2,11 +2,11 @@ const printBtn = document.getElementById('print');
const codeTextArea = document.getElementsByTagName('textarea')[0];
const code = document.getElementById('code');
const documentNameInput = document.getElementById('document-name-input');
const documentTitle = document.getElementById('document-title');
const languageSelector = document.getElementById('languages');
const codeLines = document.getElementById('line-nums');
const themeStylesheet = document.getElementById('theme-style');
const themeSelector = document.getElementById('themes');
const codeContainer = document.getElementById('code-container');
let selectedLanguage = localStorage.getItem('language') || 'javascript';
let selectedTheme = localStorage.getItem('theme') || 'github-dark';
let codeText = localStorage.getItem('code') || 'console.log("Hello World")';
@@ -15,34 +15,42 @@ let codeText = localStorage.getItem('code') || 'console.log("Hello World")';
themeStylesheet.setAttribute('href', getStylesheet(selectedTheme));
themeSelector.value = selectedTheme;
code.classList.add('hljs', `language-${selectedLanguage}`);
code.innerHTML = escape(codeText);
escaped = escapeHtml(codeText);
code.innerHTML = escaped;
codeTextArea.value = codeText;
languageSelector.value = selectedLanguage;
documentTitle.innerHTML = documentNameInput.value || 'Untitled';
updateLineNumbers();
hljs.configure({
languages: ['java', 'javascript', 'html', 'typescript', 'cpp']
});
hljs.highlightElement(code);
updateCode();
// Attach event listeners
documentNameInput.addEventListener('input', () => {
documentTitle.innerHTML = documentNameInput.value || 'Untitled';
});
printBtn.addEventListener('click', () => {
console.log('Print button clicked.');
document.title = documentTitle.textContent || 'code.pdf';
updateCode();
let optGroup = themeSelector.options[themeSelector.selectedIndex].parentNode;
const lineNumbers = document.querySelectorAll('.line-number');
if (optGroup.label === 'Dark') {
for (let i = 0; i < lineNumbers.length; i++) {
lineNumbers[i].style.backgroundColor = '#353b48';
lineNumbers[i].style.color = '#dfe6e9';
}
} else {
for (let i = 0; i < lineNumbers.length; i++) {
lineNumbers[i].style.backgroundColor = '#dcdde1';
lineNumbers[i].style.color = '#2d3436';
}
}
document.title = documentNameInput.value || 'Code';
window.print();
document.title = 'Code Formatter';
document.title = 'Convert Code to PDF Online: Free Tool for Programming Languages';
});
codeTextArea.addEventListener('input', () => {
codeText = codeTextArea.value;
localStorage.setItem('code', codeText);
code.innerHTML = escape(codeText);
updateLineNumbers();
hljs.highlightElement(code);
code.innerHTML = escapeHtml(codeText);
});
languageSelector.addEventListener('change', () => {
@@ -50,44 +58,50 @@ languageSelector.addEventListener('change', () => {
selectedLanguage = languageSelector.value;
localStorage.setItem('language', selectedLanguage);
code.classList.add(`language-${selectedLanguage}`);
hljs.highlightElement(code);
});
themeSelector.addEventListener('change', () => {
selectedTheme = themeSelector.value;
themeStylesheet.href = getStylesheet(selectedTheme);
localStorage.setItem('theme', selectedTheme);
hljs.highlightElement(code);
documentTitle.innerHTML = documentNameInput.value || 'Untitled';
});
window.addEventListener('beforeprint', event => {
document.body.classList.add('hljs');
});
window.addEventListener('afterprint', event => {
document.body.classList.remove('hljs');
});
// Helper functions
function escape(s) {
return s.replace(/[^0-9A-Za-z ]/g, c => `&#${c.charCodeAt(0)};`);
}
function updateLineNumbers() {
const lines = codeTextArea.value.split('\n');
const numLines = lines.length;
const numLinesDigits = numLines.toString().length;
let html = '';
for (let i = 0; i < numLines; i++) {
html += `<pre>${(i + 1).toString().padStart(numLinesDigits)} </pre>`;
for (let j = 0; j < lines[i].length / 98 - 1; j++) {
html += `<pre>${''.padStart(numLinesDigits)} </pre>`;
}
}
codeLines.innerHTML = html;
function escapeHtml(text) {
return text
.replace(/&/g, "&amp;")
.replace(/</g, "&lt;")
.replace(/>/g, "&gt;")
.replace(/"/g, "&quot;")
.replace(/'/g, "&#039;");
}
function getStylesheet(style) {
return `//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/styles/${style}.min.css`;
}
function createCodeLine(lineNumber, lineContent) {
lineContent = lineContent || ' ';
const code = `<code id="code" class="hljs language-${selectedLanguage}">${lineContent}</code>`;
return `<div class="code-line"><span class="line-number">${lineNumber}</span><pre class="code-pre">${code}</pre></div>`;
}
function updateCode() {
const lines = codeTextArea.value.split('\n');
const numLines = lines.length;
let formattedCode = '';
for (let i = 0; i < lines.length; i++) {
const lineNumber = (i + 1).toString().padStart(Math.floor(Math.log10(numLines)) + 1, ' ');
const lineContent = escapeHtml(lines[i]);
const codeLine = createCodeLine(lineNumber, lineContent);
formattedCode += codeLine;
}
codeContainer.innerHTML = formattedCode;
hljs.highlightAll();
}