Skip to content

Commit 61b89b2

Browse files
mProjectsCodemProjectsCode
committed
add EC default settings
1 parent 569b65d commit 61b89b2

File tree

3 files changed

+119
-67
lines changed

3 files changed

+119
-67
lines changed

‎src/Highlighter.ts‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ interface CustomTheme {
2929
}
3030

3131
// some languages break obsidian's `registerMarkdownCodeBlockProcessor`, so we blacklist them
32-
const languageNameBlacklist = new Set(['c++', 'c#', 'f#', 'mermaid']);
32+
const LANGUAGE_BLACKLIST = new Set(['c++', 'c#', 'f#', 'mermaid']);
3333

3434
export class CodeHighlighter {
3535
plugin: ShikiPlugin;
@@ -162,7 +162,9 @@ export class CodeHighlighter {
162162
minSyntaxHighlightingColorContrast: 0,
163163
themeCssRoot: 'div.expressive-code',
164164
defaultProps: {
165-
showLineNumbers: false,
165+
showLineNumbers: this.plugin.loadedSettings.ecDefaultShowLineNumbers,
166+
wrap: this.plugin.loadedSettings.ecDefaultWrap,
167+
frame: this.plugin.loadedSettings.ecDefaultFrame,
166168
},
167169
});
168170

@@ -195,8 +197,7 @@ export class CodeHighlighter {
195197
* All languages that are safe to use with Obsidian's `registerMarkdownCodeBlockProcessor`.
196198
*/
197199
obsidianSafeLanguageNames(): string[] {
198-
return this.supportedLanguages.filter(lang => !languageNameBlacklist.has(lang) && !this.plugin.loadedSettings.disabledLanguages.includes(lang));
199-
// .concat(this.customLanguages.map(lang => lang.name));
200+
return this.supportedLanguages.filter(lang => !LANGUAGE_BLACKLIST.has(lang) && !this.plugin.loadedSettings.disabledLanguages.includes(lang));
200201
}
201202

202203
/**

‎src/settings/Settings.ts‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,12 @@
11
import { OBSIDIAN_THEME_IDENTIFIER } from 'src/themes/ThemeMapper';
22

3+
export enum FrameType {
4+
Code = 'code',
5+
Terminal = 'terminal',
6+
None = 'none',
7+
Auto = 'auto',
8+
}
9+
310
export interface Settings {
411
disabledLanguages: string[];
512
customThemeFolder: string;
@@ -12,6 +19,9 @@ export interface Settings {
1219
lightTheme: string;
1320
preferThemeColors: boolean;
1421
inlineHighlighting: boolean;
22+
ecDefaultShowLineNumbers: boolean;
23+
ecDefaultWrap: boolean;
24+
ecDefaultFrame: FrameType;
1525
}
1626

1727
export const DEFAULT_SETTINGS: Settings = {
@@ -23,4 +33,7 @@ export const DEFAULT_SETTINGS: Settings = {
2333
lightTheme: OBSIDIAN_THEME_IDENTIFIER,
2434
preferThemeColors: true,
2535
inlineHighlighting: true,
36+
ecDefaultShowLineNumbers: false,
37+
ecDefaultWrap: false,
38+
ecDefaultFrame: FrameType.Auto,
2639
};

‎src/settings/SettingsTab.ts‎

Lines changed: 101 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import type ShikiPlugin from 'src/main';
33
import { StringSelectModal } from 'src/settings/StringSelectModal';
44
import { bundledThemesInfo } from 'shiki';
55
import { OBSIDIAN_THEME_IDENTIFIER } from 'src/themes/ThemeMapper';
6+
import { FrameType } from 'src/settings/Settings';
67

78
export class ShikiSettingsTab extends PluginSettingTab {
89
plugin: ShikiPlugin;
@@ -24,23 +25,70 @@ export class ShikiSettingsTab extends PluginSettingTab {
2425
...builtInThemes,
2526
};
2627

28+
new Setting(this.containerEl).setName('All setting changes require a reload of the highlighter').addButton(button => {
29+
button
30+
.setCta()
31+
.setButtonText('Reload Highlighter')
32+
.onClick(async () => {
33+
button.setDisabled(true);
34+
await this.plugin.reloadHighlighter();
35+
button.setDisabled(false);
36+
});
37+
});
38+
2739
new Setting(this.containerEl)
28-
.setName('Reload Highlighter')
29-
.setDesc('Reload the syntax highlighter. REQUIRED AFTER SETTINGS CHANGES.')
30-
.addButton(button => {
31-
button
32-
.setCta()
33-
.setButtonText('Reload Highlighter')
34-
.onClick(async () => {
35-
button.setDisabled(true);
36-
await this.plugin.reloadHighlighter();
37-
button.setDisabled(false);
38-
});
40+
.setName('Inline Syntax Highlighting')
41+
.setDesc('Enables syntax highlighting for inline code blocks via `{lang} code`.')
42+
.addToggle(toggle => {
43+
toggle.setValue(this.plugin.settings.inlineHighlighting).onChange(async value => {
44+
this.plugin.settings.inlineHighlighting = value;
45+
await this.plugin.saveSettings();
46+
});
47+
});
48+
49+
new Setting(this.containerEl).setName('EC defaults').setHeading();
50+
51+
new Setting(this.containerEl)
52+
.setName('Show line numbers')
53+
.setDesc('Controls whether line numbers are shown by default.')
54+
.addToggle(toggle => {
55+
toggle.setValue(this.plugin.settings.ecDefaultShowLineNumbers).onChange(async value => {
56+
this.plugin.settings.ecDefaultShowLineNumbers = value;
57+
await this.plugin.saveSettings();
58+
});
59+
});
60+
61+
new Setting(this.containerEl)
62+
.setName('Wrap')
63+
.setDesc('Controls whether code block lines wrap by default.')
64+
.addToggle(toggle => {
65+
toggle.setValue(this.plugin.settings.ecDefaultWrap).onChange(async value => {
66+
this.plugin.settings.ecDefaultWrap = value;
67+
await this.plugin.saveSettings();
68+
});
69+
});
70+
71+
new Setting(this.containerEl)
72+
.setName('Frame')
73+
.setDesc('Controls the default frame type for code blocks.')
74+
.addDropdown(dropdown => {
75+
dropdown.addOptions({
76+
[FrameType.Code]: 'Code',
77+
[FrameType.Terminal]: 'Terminal',
78+
[FrameType.None]: 'None',
79+
[FrameType.Auto]: 'Auto',
80+
});
81+
dropdown.setValue(this.plugin.settings.ecDefaultFrame).onChange(async value => {
82+
this.plugin.settings.ecDefaultFrame = value as FrameType;
83+
await this.plugin.saveSettings();
84+
});
3985
});
4086

87+
new Setting(this.containerEl).setName('Theme').setHeading();
88+
4189
new Setting(this.containerEl)
4290
.setName('Dark theme')
43-
.setDesc('Select the dark theme for the code blocks.')
91+
.setDesc("The theme for code blocks when Obsidian's base color scheme is dark.")
4492
.addDropdown(dropdown => {
4593
dropdown.addOptions(themes);
4694
dropdown.setValue(this.plugin.settings.darkTheme).onChange(async value => {
@@ -51,7 +99,7 @@ export class ShikiSettingsTab extends PluginSettingTab {
5199

52100
new Setting(this.containerEl)
53101
.setName('Light theme')
54-
.setDesc('Select the light theme for the code blocks.')
102+
.setDesc("The theme for code blocks when Obsidian's base color scheme is light.")
55103
.addDropdown(dropdown => {
56104
dropdown.addOptions(themes);
57105
dropdown.setValue(this.plugin.settings.lightTheme).onChange(async value => {
@@ -75,9 +123,21 @@ export class ShikiSettingsTab extends PluginSettingTab {
75123
});
76124
});
77125

126+
new Setting(this.containerEl)
127+
.setName('Prefer theme colors')
128+
.setDesc('When enabled the plugin will prefer theme colors over CSS variables for things like the code block background.')
129+
.addToggle(toggle => {
130+
toggle.setValue(this.plugin.settings.preferThemeColors).onChange(async value => {
131+
this.plugin.settings.preferThemeColors = value;
132+
await this.plugin.saveSettings();
133+
});
134+
});
135+
136+
new Setting(this.containerEl).setHeading().setName('Languages');
137+
78138
const customLanguageFolderSetting = new Setting(this.containerEl)
79139
.setName('Custom languages folder location')
80-
.setDesc('Folder relative to your Vault where custom JSON language files are located. RESTART REQUIRED AFTER CHANGES.')
140+
.setDesc('Folder relative to your Vault where custom JSON language files are located.')
81141
.addText(textbox => {
82142
textbox
83143
.setValue(this.plugin.settings.customLanguageFolder)
@@ -90,6 +150,33 @@ export class ShikiSettingsTab extends PluginSettingTab {
90150
});
91151
});
92152

153+
new Setting(this.containerEl)
154+
.setName('Excluded Languages')
155+
.setDesc('Configure language to exclude.')
156+
.addButton(button => {
157+
button.setButtonText('Add Language Rule').onClick(() => {
158+
const modal = new StringSelectModal(this.plugin, this.plugin.highlighter.supportedLanguages, language => {
159+
this.plugin.settings.disabledLanguages.push(language);
160+
void this.plugin.saveSettings();
161+
this.display();
162+
});
163+
modal.open();
164+
});
165+
});
166+
167+
for (const language of this.plugin.settings.disabledLanguages) {
168+
new Setting(this.containerEl).setName(language).addButton(button => {
169+
button
170+
.setIcon('trash')
171+
.setWarning()
172+
.onClick(() => {
173+
this.plugin.settings.disabledLanguages = this.plugin.settings.disabledLanguages.filter(x => x !== language);
174+
void this.plugin.saveSettings();
175+
this.display();
176+
});
177+
});
178+
}
179+
93180
if (Platform.isDesktopApp) {
94181
customThemeFolderSetting.addExtraButton(button => {
95182
button
@@ -119,54 +206,5 @@ export class ShikiSettingsTab extends PluginSettingTab {
119206
});
120207
});
121208
}
122-
123-
new Setting(this.containerEl)
124-
.setName('Prefer theme colors')
125-
.setDesc('When enabled the plugin will prefer theme colors over CSS variables for things like the code block background.')
126-
.addToggle(toggle => {
127-
toggle.setValue(this.plugin.settings.preferThemeColors).onChange(async value => {
128-
this.plugin.settings.preferThemeColors = value;
129-
await this.plugin.saveSettings();
130-
});
131-
});
132-
133-
new Setting(this.containerEl)
134-
.setName('Inline Syntax Highlighting')
135-
.setDesc('Enables syntax highlighting for inline code blocks via `{lang} code`.')
136-
.addToggle(toggle => {
137-
toggle.setValue(this.plugin.settings.inlineHighlighting).onChange(async value => {
138-
this.plugin.settings.inlineHighlighting = value;
139-
await this.plugin.saveSettings();
140-
});
141-
});
142-
143-
new Setting(this.containerEl).setHeading().setName('Language Settings').setDesc('Configure language settings. RESTART REQUIRED AFTER CHANGES.');
144-
145-
new Setting(this.containerEl)
146-
.setName('Excluded Languages')
147-
.setDesc('Configure language to exclude.')
148-
.addButton(button => {
149-
button.setButtonText('Add Language Rule').onClick(() => {
150-
const modal = new StringSelectModal(this.plugin, this.plugin.highlighter.supportedLanguages, language => {
151-
this.plugin.settings.disabledLanguages.push(language);
152-
void this.plugin.saveSettings();
153-
this.display();
154-
});
155-
modal.open();
156-
});
157-
});
158-
159-
for (const language of this.plugin.settings.disabledLanguages) {
160-
new Setting(this.containerEl).setName(language).addButton(button => {
161-
button
162-
.setIcon('trash')
163-
.setWarning()
164-
.onClick(() => {
165-
this.plugin.settings.disabledLanguages = this.plugin.settings.disabledLanguages.filter(x => x !== language);
166-
void this.plugin.saveSettings();
167-
this.display();
168-
});
169-
});
170-
}
171209
}
172210
}

0 commit comments

Comments
 (0)