mirror of
https://github.com/NohamR/Code-to-PDF.git
synced 2026-05-25 19:58:53 +00:00
First commit
This commit is contained in:
tarikjaber
80
index.html
Normal file
80
index.html
Normal 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
97
index.js
Normal 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("<", "<").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');
|
||||||
|
});
|
||||||
147
styles.css
Normal file
147
styles.css
Normal 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;
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user