From 991cdb70317e227bd3ca700ba9859d6136ad2ba3 Mon Sep 17 00:00:00 2001 From: tarikjaber <55803936+tarikjaber@users.noreply.github.com> Date: Mon, 13 Feb 2023 17:25:00 -0500 Subject: [PATCH] First commit --- index.html | 80 +++++++++++++++++++++++++++++ index.js | 97 +++++++++++++++++++++++++++++++++++ styles.css | 147 +++++++++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 324 insertions(+) create mode 100644 index.html create mode 100644 index.js create mode 100644 styles.css diff --git a/index.html b/index.html new file mode 100644 index 0000000..262aa0e --- /dev/null +++ b/index.html @@ -0,0 +1,80 @@ + + + + + + + + Code Formatter + + + + + + + + + + + +
+

Code to PDF

+
+ + + + +
+ +
+ + + + + diff --git a/index.js b/index.js new file mode 100644 index 0000000..9420668 --- /dev/null +++ b/index.js @@ -0,0 +1,97 @@ +let printBtn = document.getElementById('print'); +let codeTextArea = document.getElementsByTagName('textarea')[0]; +let code = document.getElementById('code'); +let documentNameInput = document.getElementById('document-name-input'); +let documentTitle = document.getElementById('document-title'); +let languageSelector = document.getElementById('languages'); +let codeLines = document.getElementById('line-nums'); +let themeStylesheet = document.getElementById('theme-style'); +let themeSelector = document.getElementById('themes'); +let selectedLanguage = 'javascript'; +let selectedTheme = 'default'; +let codeText = 'console.log("Hello World")'; +selectedTheme = localStorage.getItem('theme') ?? 'github-dark'; +themeStylesheet.setAttribute('href', getStylesheet(selectedTheme)); +themeSelector.value = selectedTheme; +code.classList.remove(`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); +updateLineNumbers(); +hljs.configure({ + languages: ['java', 'javascript', 'html', 'typescript', 'cpp'] +}); +hljs.highlightBlock(code); +code.classList.add(`language-${selectedLanguage}`); +code.classList.add('hljs'); +documentNameInput.addEventListener('input', () => { + documentTitle.innerHTML = documentNameInput.value; +}); +printBtn.addEventListener('click', () => { + console.log("Print button clicked."); + document.title = documentTitle.textContent ?? "code.pdf"; + window.print(); + document.title = "Code Formatter"; +}); +function escape(s) { + return s.replace(/[^0-9A-Za-z ]/g, c => "&#" + c.charCodeAt(0) + ";"); +} +codeTextArea.addEventListener('input', () => { + if (codeTextArea.value !== '') { + localStorage.setItem('code', codeTextArea.value); + code.innerHTML = escape(codeTextArea.value); + updateLineNumbers(); + } + else { + code.innerHTML = ""; + localStorage.setItem('code', ''); + updateLineNumbers(); + } + hljs.highlightBlock(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 += `
${(i + 1).toString().padStart(numLinesDigits)}
`; + for (let j = 0; j < (lines[i].length) / 98 - 1; j++) { + codeLines.innerHTML += `
${"".padStart(numLinesDigits)}
`; + } + } + codeLines.classList.add("hljs"); +} +languageSelector.addEventListener('change', () => { + code.classList.remove(`language-${selectedLanguage}`); + selectedLanguage = languageSelector.value.replace("<", "<").replace(">", ">"); + code.classList.add(`language-${selectedLanguage}`); + localStorage.setItem('language', selectedLanguage); + hljs.highlightBlock(code); +}); +themeSelector.addEventListener('change', () => { + themeStylesheet.href = getStylesheet(themeSelector.value); + documentTitle.innerHTML = documentNameInput.value; + localStorage.setItem('theme', themeSelector.value); + hljs.highlightBlock(code); +}); +function getStylesheet(style) { + return `//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/styles/${style}.min.css`; +} +window.addEventListener('beforeprint', event => { + document.body.classList.add('hljs'); +}); +window.addEventListener('afterprint', event => { + document.body.classList.remove('hljs'); +}); diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..ad58a4d --- /dev/null +++ b/styles.css @@ -0,0 +1,147 @@ +body { + font-family: 'Roboto', sans-serif; + margin: 0px; +} + +select { + padding: 6px; + border-radius: 5px; +} + +h1 { + margin: 0; + padding-bottom: 20px; + color: white; + background-color: #222831; + padding: 20px; + margin: -20px -20px 20px -20px; +} + +.options { + display: flex; + column-gap: 20px; + width: 100%; + flex-wrap: wrap; + row-gap: 14px; +} + +input { + padding: 6.5px; + border-radius: 5px; + border-width: 1px; +} + +.options > * { + flex-grow: 2; + flex: 1 1 0px; +} + +button { + border-width: 0; + background-color: dodgerblue; + color: white; + padding: 6px; + min-width: 120px; + border-radius: 5px; +} + +button:active { + background-color: #5584AC; +} + +textarea { + padding: 10px; + margin-top: 20px; + resize: none; + flex-grow: 1; + border-radius: 5px; +} + +html, body { + height: 100%; +} + +.hide-from-print { + height: calc(100% - 40px); + padding: 20px; + display: flex; + flex-direction: column; +} + +pre { + margin: 0; +} + +#code-container { + display: flex; + margin: 0 -20px; + font-family: 'Fira Code', monospace; +} + +#document-title { + display: none; +} + +code { + font-size: 14px; + white-space: pre-wrap; +} + +#line-nums { + width: auto; + font-size: 14px; + padding-left: 11px; + padding-top: 13px; + padding-bottom: 4px; + display: inline-block; +} + +#code-div { + background-color: #c9d1d9; + border-radius: 5px; + width: auto; + flex: 1; + display: inline-block; +} + +#code { + margin-left: 2px; +} + +#print-area { + padding: 20px; + display: none; +} + +a { + color: inherit; + text-decoration: none; +} + +@media print { + body { + color-adjust: exact; + -webkit-print-color-adjust: exact; + } + + #document-title { + margin-bottom: 20px; + } + + #print-area { + display: block; + } + + #code-container { + margin-top: -20px; + } + + .hide-from-print { + display: none; + } +} + +p { + margin-top: 0; + margin-bottom: 0; +}