diff --git a/README.md b/README.md index d5c32ae..50a354d 100644 --- a/README.md +++ b/README.md @@ -41,6 +41,16 @@ Line numbers can be enabled with `showLineNumbers`. ... ``` ```` +### Word Wrap + +The default setting for Word Wrap is true. This can be changed in the Plugin Settings. +Individual code blocks can be set with `wrap=true` or `wrap=false`, which will always override the global setting. + +````md +```language wrap=true +... +``` +```` ### Title diff --git a/exampleVault/index.md b/exampleVault/index.md index ea83692..6e5eede 100644 --- a/exampleVault/index.md +++ b/exampleVault/index.md @@ -37,6 +37,74 @@ export class Parser { } ``` +TypeScript codearsiNOM (wrap set to false) +```ts title="A part of ParsiNOM" {13-15, 22-29} showLineNumbers wrap=false +export class Parser { + public p: ParseFunction; + + constructor(p: ParseFunction) { + this.p = p; + } + + /** + * Parses a string, returning a result object. + * + * @param str + */ + tryParse(str: string): ParseResult { + return this.p(new ParserContext(str, { index: 0, line: 1, column: 1 })); + } + + /** + * Parses a string, throwing a {@link ParsingError} on failure. + * + * @param str + */ + parse(str: string): SType { + const result: ParseResult = this.tryParse(str); + if (result.success) { + return result.value; + } else { + throw new ParsingError(str, result); + } + } +} +``` + +TypeScript codearsiNOM (wrap set to true) +```ts title="A part of ParsiNOM" {13-15, 22-29} showLineNumbers wrap=true +export class Parser { + public p: ParseFunction; + + constructor(p: ParseFunction) { + this.p = p; + } + + /** + * Parses a string, returning a result object. + * + * @param str + */ + tryParse(str: string): ParseResult { + return this.p(new ParserContext(str, { index: 0, line: 1, column: 1 })); + } + + /** + * Parses a string, throwing a {@link ParsingError} on failure. + * + * @param str + */ + parse(str: string): SType { + const result: ParseResult = this.tryParse(str); + if (result.success) { + return result.value; + } else { + throw new ParsingError(str, result); + } + } +} +``` + CSS code ```css title="Some CSS by sailKite" showLineNumbers {2} ins={6-8, 15-17} del={15-17} @@ -99,3 +167,31 @@ echo "Hello" > - this line will be marked as deleted > this is a regular line > ``` + + +Javascript Wrapping tests +```ts title="Global Setting" showLineNumbers +const pagebuttons = ["`button-page1` ", "`button-page2` ", "`button-page3` ", "`button-page4` ", "`button-page5` ", "`button-page6` ", "`button-page7`", "`button-page8`", "`button-page9`", "`button-page10`", "`button-page11`", "`button-page12`", "`button-page13`", "`button-page14`", "`button-page15`", "`button-page16`", "`button-page17`", "`button-page18`", "`button-page19`", "`button-page20`", "`button-page21`", "`button-page22`", "`button-page23`", "`button-page24`", "`button-page25`"]; + +function arrayContains(str, filter){ + return (str?.split(" ").some(r => filter?.includes(r)) || !filter); +} +``` + +Javascript +```ts title="Always Wrapping" showLineNumbers wrap=true +const pagebuttons = ["`button-page1` ", "`button-page2` ", "`button-page3` ", "`button-page4` ", "`button-page5` ", "`button-page6` ", "`button-page7`", "`button-page8`", "`button-page9`", "`button-page10`", "`button-page11`", "`button-page12`", "`button-page13`", "`button-page14`", "`button-page15`", "`button-page16`", "`button-page17`", "`button-page18`", "`button-page19`", "`button-page20`", "`button-page21`", "`button-page22`", "`button-page23`", "`button-page24`", "`button-page25`"]; + +function arrayContains(str, filter){ + return (str?.split(" ").some(r => filter?.includes(r)) || !filter); +} +``` + +Javascript +```ts title="Never Wrapping" showLineNumbers wrap=false +const pagebuttons = ["`button-page1` ", "`button-page2` ", "`button-page3` ", "`button-page4` ", "`button-page5` ", "`button-page6` ", "`button-page7`", "`button-page8`", "`button-page9`", "`button-page10`", "`button-page11`", "`button-page12`", "`button-page13`", "`button-page14`", "`button-page15`", "`button-page16`", "`button-page17`", "`button-page18`", "`button-page19`", "`button-page20`", "`button-page21`", "`button-page22`", "`button-page23`", "`button-page24`", "`button-page25`"]; + +function arrayContains(str, filter){ + return (str?.split(" ").some(r => filter?.includes(r)) || !filter); +} +``` diff --git a/manifest-beta.json b/manifest-beta.json index e69122f..0ac70a1 100644 --- a/manifest-beta.json +++ b/manifest-beta.json @@ -1,7 +1,7 @@ { "id": "shiki-highlighter", "name": "Shiki Highlighter", - "version": "0.3.2", + "version": "0.3.3", "minAppVersion": "1.5.0", "description": "Highlight code blocks with Shiki.", "author": "Moritz Jung", diff --git a/manifest.json b/manifest.json index e69122f..0ac70a1 100644 --- a/manifest.json +++ b/manifest.json @@ -1,7 +1,7 @@ { "id": "shiki-highlighter", "name": "Shiki Highlighter", - "version": "0.3.2", + "version": "0.3.3", "minAppVersion": "1.5.0", "description": "Highlight code blocks with Shiki.", "author": "Moritz Jung", diff --git a/src/main.ts b/src/main.ts index d9dc991..56b124d 100644 --- a/src/main.ts +++ b/src/main.ts @@ -138,6 +138,7 @@ export default class ShikiPlugin extends Plugin { themeCssRoot: 'div.expressive-code', defaultProps: { showLineNumbers: false, + wrap: this.settings.wrapGlobal, }, }); diff --git a/src/settings/Settings.ts b/src/settings/Settings.ts index 6c64c7e..086537f 100644 --- a/src/settings/Settings.ts +++ b/src/settings/Settings.ts @@ -2,10 +2,12 @@ export interface Settings { disabledLanguages: string[]; theme: string; preferThemeColors: boolean; + wrapGlobal: boolean; } export const DEFAULT_SETTINGS: Settings = { disabledLanguages: [], theme: 'obsidian-theme', preferThemeColors: true, + wrapGlobal: true, }; diff --git a/src/settings/SettingsTab.ts b/src/settings/SettingsTab.ts index 96a54d3..0219bd6 100644 --- a/src/settings/SettingsTab.ts +++ b/src/settings/SettingsTab.ts @@ -3,6 +3,7 @@ import type ShikiPlugin from 'src/main'; import { StringSelectModal } from 'src/settings/StringSelectModal'; import { bundledThemesInfo } from 'shiki'; +const needsARestart = 'Requires restart of Obsidian to take effect.' export class ShikiSettingsTab extends PluginSettingTab { plugin: ShikiPlugin; @@ -15,12 +16,19 @@ export class ShikiSettingsTab extends PluginSettingTab { display(): void { this.containerEl.empty(); + // Theme + const ThemeDesc = new DocumentFragment() + ThemeDesc.createSpan({}, span => { + span.innerHTML = `Select the theme for the code blocks.
+ ⚠️ ${needsARestart} + ` + }) const themes = Object.fromEntries(bundledThemesInfo.map(theme => [theme.id, `${theme.displayName} (${theme.type})`])); themes['obsidian-theme'] = 'Obsidian built-in (both)'; new Setting(this.containerEl) .setName('Theme') - .setDesc('Select the theme for the code blocks. RESTART REQUIRED AFTER CHANGES.') + .setDesc(ThemeDesc) .addDropdown(dropdown => { dropdown.addOptions(themes); dropdown.setValue(this.plugin.settings.theme).onChange(async value => { @@ -29,11 +37,16 @@ export class ShikiSettingsTab extends PluginSettingTab { }); }); + // Prefer theme colors + const preferThemeColorsDesc = new DocumentFragment() + preferThemeColorsDesc.createSpan({}, span => { + span.innerHTML = `When enabled the plugin will prefer theme colors over CSS variables for things like the code block background.
+ ⚠️ ${needsARestart} + ` + }) new Setting(this.containerEl) .setName('Prefer theme colors') - .setDesc( - 'When enabled the plugin will prefer theme colors over CSS variables for things like the code block background. RESTART REQUIRED AFTER CHANGES.', - ) + .setDesc(preferThemeColorsDesc) .addToggle(toggle => { toggle.setValue(this.plugin.settings.preferThemeColors).onChange(async value => { this.plugin.settings.preferThemeColors = value; @@ -41,9 +54,34 @@ export class ShikiSettingsTab extends PluginSettingTab { }); }); + // Wrap code in blocks + const wrapCodeDesc = new DocumentFragment() + wrapCodeDesc.createSpan({}, span => { + span.innerHTML = `Set the default value for word wrap in all code blocks globally.
+ This can be manually overridden per block with these instructions.
+ ⚠️ ${needsARestart} + ` + }) + new Setting(this.containerEl) + .setName('Wrap code in blocks') + .setDesc(wrapCodeDesc) + .addToggle(toggle => { + toggle.setValue(this.plugin.settings.wrapGlobal).onChange(async value => { + this.plugin.settings.wrapGlobal = value; + await this.plugin.saveSettings(); + }); + }); + + // Excluded Languages + const excLangDesc = new DocumentFragment() + excLangDesc.createSpan({}, span => { + span.innerHTML = `Configure language to exclude.
+ ⚠️ ${needsARestart} + ` + }) new Setting(this.containerEl) .setName('Excluded Languages') - .setDesc('Configure language to exclude. RESTART REQUIRED AFTER CHANGES.') + .setDesc(excLangDesc) .addButton(button => { button.setButtonText('Add Language Rule').onClick(() => { const modal = new StringSelectModal(this.plugin, Array.from(this.plugin.loadedLanguages.keys()), language => { @@ -54,7 +92,7 @@ export class ShikiSettingsTab extends PluginSettingTab { modal.open(); }); }); - + for (const language of this.plugin.settings.disabledLanguages) { new Setting(this.containerEl).setName(language).addButton(button => { button