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

First commit

Browse Source
This commit is contained in:
tarikjaber
2023-02-13 17:25:00 -05:00
commit 991cdb7031
3 changed files with 324 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

80
index.html Normal file
View File

@@ -0,0 +1,80 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Code Formatter</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Fira+Code&family=Roboto&display=swap" rel="stylesheet">
<link rel="stylesheet" id="theme-style"
href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/styles/github-dark.min.css">
<script src="highlight.min.js"></script>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="hide-from-print">
<h1><a href="index.html">Code to PDF</a></h1>
<div class="options">
<input id="document-name-input" type="text" placeholder="Input name" />
<select name="languages" id="languages">
<option value="javascript">Javascript</option>
<option value="typescript">Typescript</option>
<option value="json">JSON</option>
<option value="html">HTML</option>
<option value="css">CSS</option>
<option value="php">PHP</option>
<option value="python">Python</option>
<option value="r">R</option>
<option value="c">C</option>
<option value="cpp">C++</option>
<option value="cs">C#</option>
<option value="rust">Rust</option>
<option value="go">Go</option>
<option value="java">Java</option>
<option value="kotlin">Kotlin</option>
<option value="swift">Swift</option>
<option value="armasm">ARM Assembly</option>
<option value="x86asm">x86 Assembly</option>
</select>
<select name="themes" id="themes">
<optgroup label="Dark">
<option value="atom-one-dark">Atom One Dark</option>
<option value="vs2015">Visual Studio Code</option>
<option value="nord">Nord</option>
<option value="monokai">Monokai</option>
<option value="github-dark">Github Dark</option>
<option value="github-dark-dimmed">Github Dark Dimmed</option>
</optgroup>
<optgroup label="Light">
<option value="atom-one-light">Atom One Light</option>
<option value="default">Default</option>
<option value="xcode">Xcode</option>
<option value="intellij-light">Intellij Light</option>
<option value="github">Github Light</option>
</optgroup>
</select>
<button id="print">Print</button>
</div>
<textarea placeholder="Enter code ..."></textarea>
</div>
<div id="print-area">
<h1 id="document-title">Code</h1>
<div id="code-container">
<div id="line-nums" class="hljs">
<pre>1 </pre>
</div>
<div id="code-div">
<pre><code id="code">console.log("Hello World!");</code></pre>
</div>
</div>
</div>
<script src="index.js"></script>
</body>
</html>

97
index.js Normal file
View File

@@ -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 += `<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', () => {
code.classList.remove(`language-${selectedLanguage}`);
selectedLanguage = languageSelector.value.replace("<", "&lt;").replace(">", "&gt;");
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');
});

147
styles.css Normal file
View File

@@ -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;
}