Added Word Wrap as a global setting and some formatting to the Settings page

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
 

exampleVault/index.md

@@ -37,6 +37,74 @@ export class Parser<const SType extends STypeBase> {
 }
 ```
 
+TypeScript codearsiNOM (wrap set to false)
+```ts title="A part of ParsiNOM" {13-15, 22-29} showLineNumbers wrap=false
+export class Parser<const SType extends STypeBase> {
+	public p: ParseFunction<SType>;
+
+	constructor(p: ParseFunction<SType>) {
+		this.p = p;
+	}
+
+	/**
+	 * Parses a string, returning a result object.
+	 *
+	 * @param str
+	 */
+	tryParse(str: string): ParseResult<SType> {
+		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<SType> = 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<const SType extends STypeBase> {
+	public p: ParseFunction<SType>;
+
+	constructor(p: ParseFunction<SType>) {
+		this.p = p;
+	}
+
+	/**
+	 * Parses a string, returning a result object.
+	 *
+	 * @param str
+	 */
+	tryParse(str: string): ParseResult<SType> {
+		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<SType> = 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);
+}
+```

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",

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",

src/main.ts

@@ -138,6 +138,7 @@ export default class ShikiPlugin extends Plugin {
 			themeCssRoot: 'div.expressive-code',
 			defaultProps: {
 				showLineNumbers: false,
+				wrap: this.settings.wrapGlobal,
 			},
 		});
 

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,
 };

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 = '<strong style="color: var(--text-accent)">Requires restart of Obsidian to take effect.</strong>'
 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.<br/>        
+				⚠️ ${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,21 +37,51 @@ 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.<br/>        
+				⚠️ ${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;
 					await this.plugin.saveSettings();
 				});
 			});
 
+		// 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.<br/>
+				<a href=https://expressive-code.com/key-features/word-wrap/>This can be manually overridden per block with these instructions</a>.<br/>        
+				⚠️ ${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.<br/>        
+				⚠️ ${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