Finish Readme

CHANGELOG.md

@@ -5,3 +5,5 @@ With version `1.1.0` this alternative highlighting is released.
 Version `1.1.0` introduces icons.
 
 **Note:** The method how line numbers were displayed before version `1.1.0` does not exist any more. Line numbers are displayed from now on, as shown below.
+
+https://github.com/twibiral/obsidian-execute-code/blob/master/CHANGELOG.md

CONTRIBUTING.md

@@ -0,0 +1 @@
+https://github.com/kefranabg/readme-md-generator/blob/master/CONTRIBUTING.md

README.md

@@ -3,37 +3,13 @@
 [![Release](https://img.shields.io/github/v/release/mugiwara85/CodeblockCustomizer?style=for-the-badge)](https://github.com/mugiwara85/CodeblockCustomizer/releases/latest)
 [![Downloads](https://img.shields.io/badge/dynamic/json?logo=obsidian&color=%23483699&label=downloads&style=for-the-badge&query=%24%5B%22codeblock-customizer%22%5D.downloads&url=https%3A%2F%2Fraw.githubusercontent.com%2Fobsidianmd%2Fobsidian-releases%2Fmaster%2Fcommunity-plugin-stats.json)](https://obsidian.md/plugins?id=codeblock-customizer)
 
-This is a plugin for [Obsidian.md](https://obsidian.md).
+This is a plugin for [Obsidian.md](https://obsidian.md) which lets you customize the codeblocks in both editing mode and reading mode.
 
-I couldn't find any plugin, where I could customize codeblocks which works reliably and in both editing and reading mode so I created my own.
-
-This plugin lets you customize the codeblocks in the following way in both editing mode and reading mode:
+I couldn't find any plugin, where I could customize codeblocks which works reliably and in both editing and reading mode so I created my own!
 
 > **Warning**  
 If you used version 1.0.1, then you must delete the `data.json` file from `VaultFolder/.obsidian/plugins/codeblock-customizer/`. This only needs to happen once but is necessary as the file does not contain a few entries which are required by version 1.1.0 or above. After that, everything should work fine.
 
-TODO Section
-
-- Default dark and light theme. You can create your own themes as well.
-- Enable editor active line highlight. The active line in Obsidian (including codeblocks) will be highlighted (you can customize the color).
-- Enable codeblock active line highlight. The active line inside a codeblock will be highlighted (you can customize the color).
-- Exclude languages. You can define languages separated by a comma, to which the plugin will not apply.
-- Set background color for codeblocks.
-- Lets you highlight specific lines.
-  - Customize highlight color
-- Lets you define multiple highlight colors to highlight lines.
-- Display filename
-  - If a filename is defined a header will be inserted, where it is possible to customize the text (color, bold, italic), and the header (color, header line) itself as well
-- Fold code
-  - If the header is displayed (either by defining filename or other way explained below), you can click on the header to fold the codeblock below it
-- Display codeblock language. This displays the language (if specified) of the codeblock in the header.
-  - Customize text color, background color, bold text, italic text for the language tag inside the header.
-  - By default the language tag is only displayed, if the header is displayed, and a if a language is defined for a codeblock. You can however force, to always display the codeblock language, even if the header would not be displayed.
-- Display codeblock language icon (if available for the specified language) in the header.
-- Add line numbers to codeblocks
-  - Customize if the linenumber should also be highlighted, if a line is highlighted
-  - Customize background color, and color of the line numbers
-
 ## Settings
 
 ### Excluded Languages
@@ -67,21 +43,21 @@ The different component colors that can be set within a theme are:
 - Button color
 - Button active color
 
-'Default' theme in dark mode with Default Obsidian theme:
+'Default' theme colors in dark mode with Default Obsidian theme:
 
-![Pasted_image_20230125231644.png](attachments/Pasted_image_20230125231644.png) TODO Update image
+![Default Default Dark Colors](images/DefaultDefaultDarkColors.png)
 
-'Default' theme in light mode with Default Obsidian theme:
+'Default' theme colors in light mode with Default Obsidian theme:
 
-![Pasted_image_20230125231735.png](attachments/Pasted_image_20230125231735.png) TODO Update image
+![Default Default Light Colors](images/DefaultDefaultLightColors.png)
 
-'Default' theme in dark mode with TODO theme:
+'Default' theme colors in dark mode with [Obsidianite](https://github.com/bennyxguo/Obsidian-Obsidianite) theme:
 
-TODO Add image
+![Default Obsidianite Dark Colors](images/DefaultObsidianiteDarkColors.png)
 
-'Solarized' theme in dark mode with Default Obsidian theme:
+'Solarized' theme colors in dark mode with Default Obsidian theme:
 
-TODO Add image
+![Solarized Default Dark Colors](images/SolarizedDefaultDarkColors.png)
 
 I am not a designer, so if you have created a cool theme, send me the color codes, and I might include it as a default theme in the next release :-\)
 
@@ -109,30 +85,32 @@ Example:
 
 ` ```cpp title:test.cpp`
 
-![Pasted_image_20230125230351.png](attachments/Pasted_image_20230125230351.png) TODO Update image
+![Title Short](images/TitleShort.png)
 
 ` ```cpp title:"long filename.cpp"`
 
-TODO Add image
+![Title Long](images/TitleLong.png)
 
 ### Folding
 
 To specify an initial fold state when the document is opened, use the `fold` parameter. If `fold` is set in a codeblock, then when you open the document, the codeblock will be automatically collapsed, and only the header will be displayed. You can unfold the codeblock by clicking on the header.
 
+Clicking on any header will toggle the fold for that codeblock.
+
 When no `title` parameter is set, the folded codeblock will have a default fold placeholder title. This can be changed in settings, or it can be changed for a specific parameter by setting a string after the fold parameter as in `fold:Folded` or `fold:"Collapsed Codeblock"`.
 
 Example:
 
 ` ```cpp fold`
 
-![Pasted_image_20230125230928.png](attachments/Pasted_image_20230125230928.png) TODO Update image
+![Fold](images/Fold.png)
 
 ` ```cpp fold:"This is collapsed"`
 
-![Pasted_image_20230125230928.png](attachments/Pasted_image_20230125230928.png) TODO Update image
+![Fold Placeholder](images/FoldPlaceholder.png)
 
 Clicking on header
-TODO Add folding gif
+![Collapse](images/Collapse.gif)
 
 ### Highlighting
 
@@ -145,17 +123,17 @@ To highlight lines, specify `hl:` followed by line numbers in the first line of
 Example:
 ` ```cpp hl:1,3,4-6`
 
-![Pasted_image_20230125230046.png](attachments/Pasted_image_20230125230046.png) TODO Update image
+![Default Highlight](images/DefaultHighlight.png)
 
 Highlights can be set to also highlight line numbers as well as the code in settings.
 
 Example:
-TODO Add image
+![Default Highlight Gutter](images/DefaultHighlightGutter.png)
 
 Highlights created by the default highlight parameter or alternative highlight parameters can be set to appear as gradient highlights which fade out to the right in the settings. A color stop percentage for this gradient can also be set.
 
 Example:
-TODO Add image
+![Default Highlight Gradient](images/DefaultHighlightGradient.png)
 
 #### Alternative Highlights
 
@@ -167,11 +145,11 @@ You could add three further types of highlight colors (`info`, `warn`, `error`).
 
 ` ```cpp info:2 warn:4-6 error:8`
 
-![[Pasted_image_20230314211417.png]](attachments/Pasted_image_20230314211417.png) TODO Update image
+![Alternative Highlights](images/AlternativeHighlights.png)
 
 Corresponding settings:
 
-![[Pasted_image_20230314211256.png]](attachments/Pasted_image_20230314211256.png) TODO Update image
+![Alternative Highlights](images/AlternativeHighlightsSettings.png)
 
 ### Ignore
 
@@ -182,10 +160,10 @@ The plugin can further be told to not apply to a specific file by adding `codebl
 Example:
 
 ` ```cpp ignore`
-TODO Add image
+![Ignore](images/Ignore.png)
 
 `codeblock-customizer-ignore: true`
-TODO Add image
+![Ignore Metadata](images/IgnoreMetadata.png)
 
 ## Appearance
 
@@ -212,19 +190,19 @@ The language tag text and title text can also be styled to be bold and/or italic
 Example:
 
 - No header
-TODO Add image
+![Header None](images/HeaderNone.png)
 
 - Header with fold only
-![Pasted_image_20230125233958.png](attachments/Pasted_image_20230125233958.png) TODO Update image
+![Header Fold](images/HeaderFold.png)
 
 - Header with codeblock language only
-![Pasted_image_20230125231233.png](attachments/Pasted_image_20230125231233.png) TODO Update image
+![Header Language](images/HeaderLanguage.png)
 
 - Header with codeblock language and title as well
-![Pasted_image_20230125231356.png](attachments/Pasted_image_20230125231356.png) TODO Update image
+![Header Language Title](images/HeaderLanguageTitle.png)
 
 - Header with codeblock language, title and icon as well
-![[Pasted_image_20230314212111.png]](attachments/Pasted_image_20230314212111.png) TODO Update image
+![Header Language Title Icon](images/HeaderLanguageTitleIcon.png)
 
 ### Active Line Indicators
 
@@ -233,11 +211,11 @@ The active line inside codeblocks can be highlighted with a custom color if enab
 The active line outside codeblocks can also be highlighted with a custom color if enabled in settings.
 
 Example:
-TODO Add image codeblock highlight
+![Active Codeblock Highlight](images/ActiveCodeblockHighlight.png)
 
-TODO Add image codeblock line number indicator
+![Active Line Number Indicator](images/ActiveLineNumberIndicator.png)
 
-TODO Add image editor highlight
+![Active Editor Highlight](images/ActiveEditorHighlight.png)
 
 ## Plugin Compatibility
 
@@ -245,9 +223,12 @@ This plugin is also compatible with the following obsidian plugins out of the bo
 
 [![Execute Code Plugin](https://github-readme-stats.vercel.app/api/pin/?username=twibiral&repo=obsidian-execute-code&show_owner=true&bg_color=00000000&border_color=e3e7ef)](https://github.com/twibiral/obsidian-execute-code)
 [![Code Preview Plugin](https://github-readme-stats.vercel.app/api/pin/?username=zjhcn&repo=obsidian-code-preview&show_owner=true&bg_color=00000000&border_color=e3e7ef)](https://github.com/zjhcn/obsidian-code-preview)
+[![Code Preview Plugin](https://github-readme-stats.vercel.app/api/pin/?username=tillahoffmann&repo=obsidian-file-include&show_owner=true&bg_color=00000000&border_color=e3e7ef)](https://github.com/tillahoffmann/obsidian-file-include)
 
 ## Roadmap
 
+Take a look at the [changelog](CHANGELOG.md) to see what has changed in past versions.
+
 ### Future Work
 
 - Implementation
@@ -259,18 +240,16 @@ This plugin is also compatible with the following obsidian plugins out of the bo
   - Implement code wrapping options
     - In reading mode, if wrapped, keep line numbers to the left when scrolling
   - Add commands to fold all, unfold all and reset default fold for codeblocks
+  - Regex highlighting parameter
   - Context Menu on right click
     - Copy codeblock
     - Copy line
     - Collapse
-    - Implement execute code buttons
+    - Implement execute code buttons (run, clear, cancel)
   - Aesthetic animation when folding codeblocks (see how callouts fold)
   - Let users redirect certain languages to alternative icons and colors
 - Appearance
   - Fix large line numbers margin padding in editing mode
-- Plugin Compatibility
-  - Support [File Include Plugin](https://github.com/tillahoffmann/obsidian-file-include)
-    - Waiting on response to [issue](https://github.com/tillahoffmann/obsidian-file-include/issues/3)
 
 ### Existing Issues
 

src/CodeblockParsing.ts

@@ -52,11 +52,11 @@ export function parseCodeblockParameters(parameterLine: string, theme: Codeblock
 }
 function parseParameterString(parameterString: string, codeblockParameters: CodeblockParameters, theme: CodeblockCustomizerTheme): void {
 	if (parameterString.startsWith('title:')) {
-		let titleMatch = /(["']?)([^\1 ]+)\1/.exec(parameterString.slice('title:'.length));
+		let titleMatch = /(["']?)([^\1]+)\1/.exec(parameterString.slice('title:'.length));
 		if (titleMatch)
 			codeblockParameters.title = titleMatch[2].trim();
 	} else if (parameterString.startsWith('fold:')) {
-		let foldPlaceholderMatch = /(["']?)([^\1 ]+)\1/.exec(parameterString.slice('fold:'.length));
+		let foldPlaceholderMatch = /(["']?)([^\1]+)\1/.exec(parameterString.slice('fold:'.length));
 		if (foldPlaceholderMatch) {
 			codeblockParameters.fold.enabled = true;
 			codeblockParameters.fold.placeholder = foldPlaceholderMatch[2].trim();

src/ReadingView.ts

@@ -79,7 +79,9 @@ async function remakeCodeblock(codeblockCodeElement: HTMLElement, codeblockPreEl
 		}
 	} else if (codeblockParameters.language === 'include') {
 		if ('file-include' in plugin.app.plugins.plugins) {
-			codeblockParameters.language = codeblockLines[0].match(/include(?:[:\s]+(?<lang>\w+))?/)?.groups?.lang;
+			const fileIncludeLanguage = codeblockLines[0].match(/include(?:[:\s]+(?<lang>\w+))?/)?.groups?.lang;
+			if (typeof fileIncludeLanguage !== 'undefined')
+				codeblockParameters.language = fileIncludeLanguage;
 		}
 	}
 

styles.css

@@ -549,6 +549,9 @@ pre.codeblock-customizer-pre button.clear-button {
 	height: 14px;
 	margin-bottom: 6px;
 	margin-left: calc(var(--language-border-width) + 12px);
+	/* margin-right: calc(var(--copy-code-header-right-margin) - var(--dent-difference)); */
+	will-change: margin-right, clip-path;
+	clip-path: var(--polygon-in);
 }
 pre.codeblock-customizer-pre button.clear-button::before {
 	content: "\200b";
@@ -563,11 +566,6 @@ pre.codeblock-customizer-pre button.clear-button::before {
 	mask-repeat: no-repeat;
 	vertical-align: 0px;
 }
-pre.codeblock-customizer-pre button.clear-button {
-	margin-right: calc(var(--copy-code-header-right-margin) - var(--dent-difference));
-	will-change: margin-right, clip-path;
-	clip-path: var(--polygon-in);
-}
 pre.codeblock-customizer-pre button.clear-button:not(:active) {
 	animation: reverse-indent var(--duration-button);
 }