File tree 3 files changed +29
-2
lines changed 3 files changed +29
-2
lines changed Original file line number Diff line number Diff line change @@ -10,6 +10,7 @@ Check [Keep a Changelog](http://keepachangelog.com/) for recommendations on how
10
10
11
11
- Added JetBrains frontend for use in JetBrains IDE plugin
12
12
- Demo: Added a link to the JetBrains plugin page
13
+ - Demo learned to change font-size
13
14
14
15
## [ 0.0.8] - 2024-10-10
15
16
Original file line number Diff line number Diff line change 44
44
let verbose = urlParams .has (" verbose" );
45
45
let showSegmentation = urlParams .has (" segmentation" );
46
46
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
+ ];
47
54
48
55
let selection = languages [parseInt (urlParams .get (" language" )) || 0 ];
49
56
let code = codeGo ;
181
188
</option >
182
189
{/each }
183
190
</select >
191
+ <select bind:value ={fontSize }>
192
+ {#each fontSizes as { label, value }}
193
+ <option {value }>
194
+ {label }
195
+ </option >
196
+ {/each }
197
+ </select >
184
198
<button on:click ={share }>Share (experimental)</button >
185
199
</div >
186
200
<div class =" codemirror" >
190
204
bind:code ={codeGo }
191
205
lang ={go ()}
192
206
on:cursorMoved ={cursorMoved }
207
+ {fontSize }
193
208
/>
194
209
{:else if selection .language === " C" }
195
210
<Editor
196
211
bind:this ={editor }
197
212
bind:code ={codeC }
198
213
lang ={cpp ()}
199
214
on:cursorMoved ={cursorMoved }
215
+ {fontSize }
200
216
/>
201
217
{:else if selection .language === " Python" }
202
218
<Editor
203
219
bind:this ={editor }
204
220
bind:code ={codePython }
205
221
lang ={python ()}
206
222
on:cursorMoved ={cursorMoved }
223
+ {fontSize }
207
224
/>
208
225
{/if }
209
226
</div >
Original file line number Diff line number Diff line change 1
1
<script lang =" ts" >
2
2
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" ;
4
5
import { createEventDispatcher } from " svelte" ;
5
6
import CodeMirror from " svelte-codemirror-editor" ;
6
7
import { oneDark } from " @codemirror/theme-one-dark" ;
7
8
import { isDark } from " ./lightdark.ts" ;
8
9
export let code: string ;
9
10
export let lang: LanguageSupport ;
11
+ export let fontSize: string = " 1em" ;
10
12
11
13
let editorView: EditorView ;
12
14
let cursorPos: { row: number ; column: number ; index: number };
13
15
14
16
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
+ );
15
24
16
25
function updateCursorPosition() {
17
26
const pos = editorView .state .selection .main .head ;
57
66
tabSize ={4 }
58
67
lineWrapping ={true }
59
68
on:ready ={onEditorReady }
60
- theme ={$isDark ? oneDark : undefined }
69
+ theme ={$isDark ? fontSizeTheme ( fontSize , oneDark ) : fontSizeTheme ( fontSize ) }
61
70
/>
You can’t perform that action at this time.
0 commit comments