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

Add font size slider

Browse Source
This commit is contained in:
√(noham)²
2025-06-15 20:09:10 +02:00
parent c01c01d4e1
commit e88417b995
3 changed files with 17 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
index.html
View File

@@ -73,6 +73,11 @@
</select> </select>
<button id="print">Print</button> <button id="print">Print</button>
</div> </div>
<div>
<label for="font-size-slider">Font Size:</label>
<input type="range" id="font-size-slider" min="8" max="32" value="14">
<span id="font-size-value">14px</span>
</div>
<textarea spellcheck="false" placeholder="Enter code ..."></textarea> <textarea spellcheck="false" placeholder="Enter code ..."></textarea>
</div> </div>
<div id="print-area"> <div id="print-area">

14
index.js
View File

@@ -7,6 +7,8 @@ const codeLines = document.getElementById('line-nums');
const themeStylesheet = document.getElementById('theme-style'); const themeStylesheet = document.getElementById('theme-style');
const themeSelector = document.getElementById('themes'); const themeSelector = document.getElementById('themes');
const codeContainer = document.getElementById('code-container'); const codeContainer = document.getElementById('code-container');
const fontSizeSlider = document.getElementById('font-size-slider');
const fontSizeValue = document.getElementById('font-size-value');
let selectedLanguage = localStorage.getItem('language') || 'javascript'; let selectedLanguage = localStorage.getItem('language') || 'javascript';
let selectedTheme = localStorage.getItem('theme') || 'github-dark'; let selectedTheme = localStorage.getItem('theme') || 'github-dark';
let codeText = localStorage.getItem('code') || 'console.log("Hello World")'; let codeText = localStorage.getItem('code') || 'console.log("Hello World")';
@@ -69,6 +71,12 @@ themeSelector.addEventListener('change', () => {
localStorage.setItem('theme', selectedTheme); localStorage.setItem('theme', selectedTheme);
}); });
fontSizeSlider.addEventListener('input', () => {
const fontSize = fontSizeSlider.value;
fontSizeValue.textContent = `${fontSize}px`;
document.documentElement.style.setProperty('--dynamic-font-size', `${fontSize}px`);
});
// Helper functions // Helper functions
function escapeHtml(text) { function escapeHtml(text) {
return text return text
@@ -103,8 +111,4 @@ function updateCode() {
codeContainer.innerHTML = formattedCode; codeContainer.innerHTML = formattedCode;
hljs.highlightAll(); hljs.highlightAll();
} }

12
styles.css
View File

@@ -110,7 +110,7 @@ pre {
} }
#code { #code {
font-size: 14px; font-size: var(--dynamic-font-size, 14px);
border: none; border: none;
border-right: var(--border-thickness) solid #c9d1d9; border-right: var(--border-thickness) solid #c9d1d9;
font-family: 'Fira Code', monospace; font-family: 'Fira Code', monospace;
@@ -133,7 +133,7 @@ pre {
.code-line { .code-line {
font-family: 'Fira Code', monospace; font-family: 'Fira Code', monospace;
font-size: 14px; font-size: var(--dynamic-font-size, 14px);
display: flex; display: flex;
} }
@@ -211,10 +211,4 @@ p {
textarea::-webkit-scrollbar-thumb { textarea::-webkit-scrollbar-thumb {
border-radius: 4px; border-radius: 4px;
} }