Skip to content

Commit ea7835a

Browse files
authored
Merge pull request #28 from tmr232/talk-prep
Demo: Learned to change font size
2 parents 51c1710 + dc72a2c commit ea7835a

File tree

3 files changed

+29
-2
lines changed

3 files changed

+29
-2
lines changed

CHANGELOG.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ Check [Keep a Changelog](http://keepachangelog.com/) for recommendations on how
1010

1111
- Added JetBrains frontend for use in JetBrains IDE plugin
1212
- Demo: Added a link to the JetBrains plugin page
13+
- Demo learned to change font-size
1314

1415
## [0.0.8] - 2024-10-10
1516

src/components/Demo.svelte

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,13 @@
4444
let verbose = urlParams.has("verbose");
4545
let showSegmentation = urlParams.has("segmentation");
4646
let debugMode = urlParams.has("debug");
47+
let fontSize = "1em";
48+
const range = (start: number, end: number) =>
49+
Array.from({ length: end - start }, (_v, k) => k + start);
50+
const fontSizes: { label: string; value: string }[] = [
51+
{ label: "Default", value: "1em" },
52+
...range(8, 31).map((n) => ({ label: `${n}`, value: `${n}px` })),
53+
];
4754
4855
let selection = languages[parseInt(urlParams.get("language")) || 0];
4956
let code = codeGo;
@@ -181,6 +188,13 @@
181188
</option>
182189
{/each}
183190
</select>
191+
<select bind:value={fontSize}>
192+
{#each fontSizes as { label, value }}
193+
<option {value}>
194+
{label}
195+
</option>
196+
{/each}
197+
</select>
184198
<button on:click={share}>Share (experimental)</button>
185199
</div>
186200
<div class="codemirror">
@@ -190,20 +204,23 @@
190204
bind:code={codeGo}
191205
lang={go()}
192206
on:cursorMoved={cursorMoved}
207+
{fontSize}
193208
/>
194209
{:else if selection.language === "C"}
195210
<Editor
196211
bind:this={editor}
197212
bind:code={codeC}
198213
lang={cpp()}
199214
on:cursorMoved={cursorMoved}
215+
{fontSize}
200216
/>
201217
{:else if selection.language === "Python"}
202218
<Editor
203219
bind:this={editor}
204220
bind:code={codePython}
205221
lang={python()}
206222
on:cursorMoved={cursorMoved}
223+
{fontSize}
207224
/>
208225
{/if}
209226
</div>

src/components/Editor.svelte

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,26 @@
11
<script lang="ts">
22
import type { LanguageSupport } from "@codemirror/language";
3-
import type { EditorView } from "@codemirror/view";
3+
import { EditorView } from "@codemirror/view";
4+
import type { Extension } from "@codemirror/state";
45
import { createEventDispatcher } from "svelte";
56
import CodeMirror from "svelte-codemirror-editor";
67
import { oneDark } from "@codemirror/theme-one-dark";
78
import { isDark } from "./lightdark.ts";
89
export let code: string;
910
export let lang: LanguageSupport;
11+
export let fontSize: string = "1em";
1012
1113
let editorView: EditorView;
1214
let cursorPos: { row: number; column: number; index: number };
1315
1416
const dispatch = createEventDispatcher();
17+
const fontSizeTheme = (
18+
fontSize: string,
19+
baseTheme?: Extension | undefined,
20+
): Extension[] =>
21+
[EditorView.theme({ "&": { fontSize: fontSize } }), baseTheme].filter(
22+
(item) => item !== undefined,
23+
);
1524
1625
function updateCursorPosition() {
1726
const pos = editorView.state.selection.main.head;
@@ -57,5 +66,5 @@
5766
tabSize={4}
5867
lineWrapping={true}
5968
on:ready={onEditorReady}
60-
theme={$isDark ? oneDark : undefined}
69+
theme={$isDark ? fontSizeTheme(fontSize, oneDark) : fontSizeTheme(fontSize)}
6170
/>

0 commit comments

Comments
 (0)