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

Simplify code

Browse Source
This commit is contained in:
tarikjaber
2023-02-23 10:12:57 -05:00
parent 10e6660050
commit 472a62434e
2 changed files with 64 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
index.html
View File

@@ -32,7 +32,7 @@
<div class="hide-from-print"> <div class="hide-from-print">
<h1><a href="index.html">Code to PDF</a></h1> <h1><a href="index.html">Code to PDF</a></h1>
<div class="options"> <div class="options">
<input id="document-name-input" type="text" placeholder="Input name" /> <input id="document-name-input" type="text" placeholder="File name" />
<select name="languages" id="languages"> <select name="languages" id="languages">
<option value="javascript">Javascript</option> <option value="javascript">Javascript</option>
<option value="typescript">Typescript</option> <option value="typescript">Typescript</option>

128
index.js
View File

@@ -1,97 +1,93 @@
let printBtn = document.getElementById('print'); const printBtn = document.getElementById('print');
let codeTextArea = document.getElementsByTagName('textarea')[0]; const codeTextArea = document.getElementsByTagName('textarea')[0];
let code = document.getElementById('code'); const code = document.getElementById('code');
let documentNameInput = document.getElementById('document-name-input'); const documentNameInput = document.getElementById('document-name-input');
let documentTitle = document.getElementById('document-title'); const documentTitle = document.getElementById('document-title');
let languageSelector = document.getElementById('languages'); const languageSelector = document.getElementById('languages');
let codeLines = document.getElementById('line-nums'); const codeLines = document.getElementById('line-nums');
let themeStylesheet = document.getElementById('theme-style'); const themeStylesheet = document.getElementById('theme-style');
let themeSelector = document.getElementById('themes'); const themeSelector = document.getElementById('themes');
let selectedLanguage = 'javascript'; let selectedLanguage = localStorage.getItem('language') || 'javascript';
let selectedTheme = 'default'; let selectedTheme = localStorage.getItem('theme') || 'github-dark';
let codeText = 'console.log("Hello World")'; let codeText = localStorage.getItem('code') || 'console.log("Hello World")';
selectedTheme = localStorage.getItem('theme') ?? 'github-dark';
// Set up the initial state
themeStylesheet.setAttribute('href', getStylesheet(selectedTheme)); themeStylesheet.setAttribute('href', getStylesheet(selectedTheme));
themeSelector.value = selectedTheme; themeSelector.value = selectedTheme;
code.classList.remove(`language-${selectedLanguage}`); code.classList.add('hljs', `language-${selectedLanguage}`);
selectedLanguage = localStorage.getItem('language') ?? 'javascript';
code.classList.add(`language-${selectedLanguage}`);
languageSelector.value = selectedLanguage;
themeStylesheet.setAttribute('href', getStylesheet(selectedTheme));
codeText = localStorage.getItem('code') ?? 'console.log("Hello World")';
localStorage.setItem('code', codeText);
codeTextArea.value = codeText;
code.innerHTML = escape(codeText); code.innerHTML = escape(codeText);
codeTextArea.value = codeText;
languageSelector.value = selectedLanguage;
documentTitle.innerHTML = documentNameInput.value || 'Untitled';
updateLineNumbers(); updateLineNumbers();
hljs.configure({ hljs.configure({
languages: ['java', 'javascript', 'html', 'typescript', 'cpp'] languages: ['java', 'javascript', 'html', 'typescript', 'cpp']
}); });
hljs.highlightElement(code); hljs.highlightElement(code);
code.classList.add(`language-${selectedLanguage}`);
code.classList.add('hljs'); // Attach event listeners
documentNameInput.addEventListener('input', () => { documentNameInput.addEventListener('input', () => {
documentTitle.innerHTML = documentNameInput.value; documentTitle.innerHTML = documentNameInput.value || 'Untitled';
}); });
printBtn.addEventListener('click', () => { printBtn.addEventListener('click', () => {
console.log("Print button clicked."); console.log('Print button clicked.');
document.title = documentTitle.textContent ?? "code.pdf"; document.title = documentTitle.textContent || 'code.pdf';
window.print(); window.print();
document.title = "Code Formatter"; document.title = 'Code Formatter';
}); });
function escape(s) {
return s.replace(/[^0-9A-Za-z ]/g, c => "&#" + c.charCodeAt(0) + ";");
}
codeTextArea.addEventListener('input', () => { codeTextArea.addEventListener('input', () => {
if (codeTextArea.value !== '') { codeText = codeTextArea.value;
localStorage.setItem('code', codeTextArea.value); localStorage.setItem('code', codeText);
code.innerHTML = escape(codeTextArea.value); code.innerHTML = escape(codeText);
updateLineNumbers(); updateLineNumbers();
}
else {
code.innerHTML = "";
localStorage.setItem('code', '');
updateLineNumbers();
}
hljs.highlightElement(code); hljs.highlightElement(code);
}); });
function updateLineNumbers() {
let lines = codeTextArea.value.split('\n');
if (lines[lines.length - 1] === '') {
code.style.paddingBottom = "31px";
}
else {
code.style.paddingBottom = "14px";
}
let numLines = lines.length;
let numLinesDigits = numLines.toString().length;
codeLines.innerHTML = "";
for (let i = 0; i < numLines; i++) {
codeLines.innerHTML += `<pre>${(i + 1).toString().padStart(numLinesDigits)} </pre>`;
for (let j = 0; j < (lines[i].length) / 98 - 1; j++) {
codeLines.innerHTML += `<pre>${"".padStart(numLinesDigits)} </pre>`;
}
}
codeLines.classList.add("hljs");
}
languageSelector.addEventListener('change', () => { languageSelector.addEventListener('change', () => {
code.classList.remove(`language-${selectedLanguage}`); code.classList.remove(`language-${selectedLanguage}`);
selectedLanguage = languageSelector.value.replace("<", "&lt;").replace(">", "&gt;"); selectedLanguage = languageSelector.value;
code.classList.add(`language-${selectedLanguage}`);
localStorage.setItem('language', selectedLanguage); localStorage.setItem('language', selectedLanguage);
code.classList.add(`language-${selectedLanguage}`);
hljs.highlightElement(code); hljs.highlightElement(code);
}); });
themeSelector.addEventListener('change', () => { themeSelector.addEventListener('change', () => {
themeStylesheet.href = getStylesheet(themeSelector.value); selectedTheme = themeSelector.value;
documentTitle.innerHTML = documentNameInput.value; themeStylesheet.href = getStylesheet(selectedTheme);
localStorage.setItem('theme', themeSelector.value); localStorage.setItem('theme', selectedTheme);
hljs.highlightElement(code); hljs.highlightElement(code);
documentTitle.innerHTML = documentNameInput.value || 'Untitled';
}); });
function getStylesheet(style) {
return `//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/styles/${style}.min.css`;
}
window.addEventListener('beforeprint', event => { window.addEventListener('beforeprint', event => {
document.body.classList.add('hljs'); document.body.classList.add('hljs');
}); });
window.addEventListener('afterprint', event => { window.addEventListener('afterprint', event => {
document.body.classList.remove('hljs'); 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 getStylesheet(style) {
return `//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/styles/${style}.min.css`;
}