diff --git a/make_styles.py b/make_styles.py deleted file mode 100644 index 3c16fc5..0000000 --- a/make_styles.py +++ /dev/null @@ -1,40 +0,0 @@ -"""Generate styles.css from styles/*.css. - -Each of CSS files other than styles_main.css defines a preset style, and -styles_main.css defines other styles needed for this plugin. -""" - -from pathlib import Path - -if __name__ == "__main__": - source = Path("./styles") - main = Path("./styles/styles_main.css") - target = Path("./styles.css") - - assert main.exists() - - lines = [] - for source_style in source.glob("*.css"): - if source_style == main: - continue - - # preset styles - with open(source_style) as f: - for line in f: - if line.lstrip().startswith('.theorem-callout'): - if line.lstrip().startswith('.theorem-callout-subtitle'): - line = f'.theorem-callout-{source_style.stem}' + ' ' + line - else: - line = f'.theorem-callout-{source_style.stem}' + line - lines.append(line) - lines.append("\n") - - with open(main) as f: - main_content = f.read() - - with open(target, 'w') as f: - f.write( - "/* This file is auto-generated. Do not edit it. */\n\n" - + main_content + "\n" - + ''.join(lines) - ) diff --git a/package.json b/package.json index 59e62b0..a6ae38a 100644 --- a/package.json +++ b/package.json @@ -4,7 +4,9 @@ "description": "Turn your Obsidian into LaTeX on steroids. Dynamically numbered theorem environments & equations, enhanced theorems/equations search & link auto-completion, and live-rendering of equations inside callouts & quotes.", "scripts": { "dev": "node esbuild.config.mjs", - "build": "tsc -noEmit -skipLibCheck && node esbuild.config.mjs production && python make_styles.py", + "build": "tsc -noEmit -skipLibCheck && node esbuild.config.mjs production && sass styles.scss styles.css", + "dev-style": "sass --watch styles.scss styles.css", + "build-style": "sass --watch styles.scss styles.css", "version": "node version-bump.mjs && git add manifest.json versions.json" }, "keywords": [], diff --git a/src/main.ts b/src/main.ts index 3c0d5d4..f840917 100644 --- a/src/main.ts +++ b/src/main.ts @@ -147,25 +147,7 @@ export default class MathBooster extends Plugin { this.registerMarkdownPostProcessor(createEquationNumberProcessor(this)); // Quick fix for https://github.com/RyotaUshio/obsidian-math-booster/issues/200 // But I don't really understand why this works. Please let me know if you know the reason. - this.app.workspace.onLayoutReady(() => { - setTimeout(async () => { - for (const leaf of this.app.workspace.getLeavesOfType('markdown')) { - const view = leaf.view as MarkdownView; - view.previewMode.rerender(true); - if (view.getMode() === 'source') { - const state = leaf.getViewState(); - const focus = view === this.app.workspace.activeEditor; - state.state.mode = 'preview'; - leaf.setViewState(state, { focus }); - setTimeout(() => { - const state = leaf.getViewState(); - state.state.mode = 'source'; - leaf.setViewState(state, { focus }); - }, 400); - } - } - }, 800) - }) + this.app.workspace.onLayoutReady(() => this.forceRerender()); // proof environments this.registerMarkdownPostProcessor(createProofProcessor(this)); @@ -454,4 +436,24 @@ export default class MathBooster extends Plugin { } }); } + + forceRerender() { + setTimeout(async () => { + for (const leaf of this.app.workspace.getLeavesOfType('markdown')) { + const view = leaf.view as MarkdownView; + view.previewMode.rerender(true); + if (view.getMode() === 'source') { + const state = leaf.getViewState(); + const focus = view === this.app.workspace.activeEditor; + state.state.mode = 'preview'; + leaf.setViewState(state, { focus }); + setTimeout(() => { + const state = leaf.getViewState(); + state.state.mode = 'source'; + leaf.setViewState(state, { focus }); + }, 400); + } + } + }, 800); + } } diff --git a/src/settings/helper.ts b/src/settings/helper.ts index 0dea952..d3e4020 100644 --- a/src/settings/helper.ts +++ b/src/settings/helper.ts @@ -104,7 +104,7 @@ export class TheoremCalloutSettingsHelper { labelPrefixEl.textContent = THEOREM_LIKE_ENVs[this.settings.type as TheoremLikeEnvID].prefix + ":"; if (this.defaultSettings.labelPrefix) { labelPrefixEl.textContent += this.defaultSettings.labelPrefix; - } + } } }); }); @@ -139,7 +139,7 @@ export abstract class SettingsHelper void) { const setting = new Setting(this.contentEl).setName(prettyName); if (description) { setting.setDesc(description); @@ -164,6 +164,7 @@ export abstract class SettingsHelper this.plugin.forceRerender()); styleSetting.descEl.replaceChildren( - "Choose between your custom style and preset styles. You will need to reload the note to see the changes. See the ", + "Choose between your custom style and preset styles. You might need to reopen the notes or reload the app to see the changes. See the ", createEl("a", { text: "documentation", attr: { href: "https://ryotaushio.github.io/obsidian-math-booster/style-your-theorems.html" } }), " for how to customize the appearance of theorem callouts. \"Custom\" is recommended, since it will give you the most control. You can view the CSS snippets for all the preset styles in the documentation or README on GitHub. The preset styles are only for a trial purpose, and they might not work well with some non-default themes.", ); diff --git a/styles.scss b/styles.scss new file mode 100644 index 0000000..2fec833 --- /dev/null +++ b/styles.scss @@ -0,0 +1,21 @@ +@use 'styles/main'; +@use 'styles/framed'; +@use 'styles/plain'; +@use 'styles/mathwiki'; +@use 'styles/vivid'; + +:has(> .theorem-callout-framed) { + @include framed.framed(); +} + +:has(> .theorem-callout-plain) { + @include plain.plain(); +} + +:has(> .theorem-callout-mathwiki) { + @include mathwiki.mathwiki(); +} + +:has(> .theorem-callout-vivid) { + @include vivid.vivid(); +} diff --git a/styles/framed.css b/styles/framed.css deleted file mode 100644 index 371be1e..0000000 --- a/styles/framed.css +++ /dev/null @@ -1,23 +0,0 @@ -.theorem-callout { - --callout-color: var(--text-normal); - font-family: Times; - background-color: rgb(0, 0, 0, 0); - border: solid var(--border-width); - border-radius: 6px; -} - -.theorem-callout .callout-icon { - display: none; -} - -.theorem-callout .callout-title-inner { - font-style: bold; -} - -.theorem-callout-subtitle { - font-weight: 400; -} - -:not(theorem-callout-axiom):not(.theorem-callout-definition):not(.theorem-callout-remark).theorem-callout-en .callout-content { - font-style: italic; -} diff --git a/styles/framed.scss b/styles/framed.scss new file mode 100644 index 0000000..bbf5b4f --- /dev/null +++ b/styles/framed.scss @@ -0,0 +1,35 @@ +@mixin framed { + /* + If you're going to use this file as a CSS snippet, only include the code between + the START and END comments to your snippet file. + */ + /* START */ + .theorem-callout { + --callout-color: var(--text-normal); + background-color: rgb(0, 0, 0, 0); + border: solid var(--border-width); + border-radius: var(--size-2-3); + } + + .theorem-callout .callout-icon { + display: none; + } + + .theorem-callout .callout-title-inner { + font-family: CMU Serif, Times, Noto Sans JP; + font-weight: bolder; + + .theorem-callout-subtitle { + font-weight: normal; + } + } + + .theorem-callout .callout-content { + font-family: CMU Serif, Times, Noto Serif JP; + } + + :not(.theorem-callout-axiom):not(.theorem-callout-definition):not(.theorem-callout-remark).theorem-callout-en .callout-content { + font-style: italic; + } + /* END */ +} \ No newline at end of file diff --git a/styles/styles_main.css b/styles/main.css similarity index 97% rename from styles/styles_main.css rename to styles/main.css index 20ca6ea..1b6831e 100644 --- a/styles/styles_main.css +++ b/styles/main.css @@ -37,17 +37,17 @@ padding: var(--size-4-6); } -.math-booster-begin-proof-en { - font-style: italic; +.math-booster-begin-proof { padding-right: 10px; + font-family: CMU Serif, Times, Noto Serif JP; + font-weight: bold; } -.math-booster-begin-proof-ja { - font-weight: 600; - font-family: Times, Noto Sans JP; - padding-right: 10px; +.math-booster-begin-proof-en { + font-style: italic; } + .math-booster-end-proof { float: right; } diff --git a/styles/mathwiki.css b/styles/mathwiki.css deleted file mode 100644 index 334ffdc..0000000 --- a/styles/mathwiki.css +++ /dev/null @@ -1,41 +0,0 @@ -.theorem-callout { - --callout-color: 248, 248, 255; - font-family: CMU Serif; -} - -.theorem-callout .callout-title-inner { - padding-left: 5px; -} - -.theorem-callout-subtitle { - font-weight: 400; -} - -.theorem-callout-en .callout-content { - font-style: italic; -} - -.theorem-callout-axiom { - /* Font Awesome: lock */ - --callout-icon: ''; -} - -.theorem-callout-definition { - /* Font Awesome: book */ - --callout-icon: ''; -} - -.theorem-callout-theorem { - /* Font Awesome: magic */ - --callout-icon: ''; -} - -.theorem-callout-proposition { - /* Font Awesome: calculator */ - --callout-icon: ''; -} - -.theorem-callout-example { - /* Font Awesome: anchor */ - --callout-icon: ''; -} diff --git a/styles/mathwiki.scss b/styles/mathwiki.scss new file mode 100644 index 0000000..535dccd --- /dev/null +++ b/styles/mathwiki.scss @@ -0,0 +1,49 @@ +@mixin mathwiki { + /* + If you're going to use this file as a CSS snippet, only include the code between + the START and END comments to your snippet file. + */ + /* START */ + .theorem-callout { + --callout-color: 248, 248, 255; + font-family: CMU Serif, Times, Noto Serif JP; + } + + .theorem-callout .callout-title-inner { + padding-left: 5px; + } + + .theorem-callout-subtitle { + font-weight: normal; + } + + .theorem-callout-en .callout-content { + font-style: italic; + } + + .theorem-callout-axiom { + /* Font Awesome: lock */ + --callout-icon: ''; + } + + .theorem-callout-definition { + /* Font Awesome: book */ + --callout-icon: ''; + } + + .theorem-callout-theorem { + /* Font Awesome: magic */ + --callout-icon: ''; + } + + .theorem-callout-proposition { + /* Font Awesome: calculator */ + --callout-icon: ''; + } + + .theorem-callout-example { + /* Font Awesome: anchor */ + --callout-icon: ''; + } + /* END */ +} \ No newline at end of file diff --git a/styles/plain.css b/styles/plain.css deleted file mode 100644 index 2cfab3b..0000000 --- a/styles/plain.css +++ /dev/null @@ -1,25 +0,0 @@ -.theorem-callout { - --callout-color: var(--text-normal); - font-family: CMU Serif; - background-color: rgb(0, 0, 0, 0); - padding-left: 0; - padding-right: 0; - border: none; - box-shadow: none; -} - -.theorem-callout .callout-icon { - display: none; -} - -.theorem-callout .callout-title-inner { - font-style: bold; -} - -.theorem-callout-subtitle { - font-weight: 400; -} - -.theorem-callout-en .callout-content { - font-style: italic; -} diff --git a/styles/plain.scss b/styles/plain.scss new file mode 100644 index 0000000..fe366e4 --- /dev/null +++ b/styles/plain.scss @@ -0,0 +1,37 @@ +@mixin plain { + /* + If you're going to use this file as a CSS snippet, only include the code between + the START and END comments to your snippet file. + */ + /* START */ + .theorem-callout { + --callout-color: var(--text-normal); + background-color: rgb(0, 0, 0, 0); + padding-left: 0; + padding-right: 0; + border: none; + box-shadow: none; + } + + .theorem-callout .callout-icon { + display: none; + } + + .theorem-callout .callout-title-inner { + font-family: CMU Serif, Times, Noto Sans JP; + font-weight: bolder; + + .theorem-callout-subtitle { + font-weight: normal; + } + } + + .theorem-callout .callout-content { + font-family: CMU Serif, Times, Noto Serif JP; + } + + :not(.theorem-callout-axiom):not(.theorem-callout-definition):not(.theorem-callout-remark).theorem-callout-en .callout-content { + font-style: italic; + } + /* END */ +} \ No newline at end of file diff --git a/styles/vivid.css b/styles/vivid.css deleted file mode 100644 index 00cbea6..0000000 --- a/styles/vivid.css +++ /dev/null @@ -1,35 +0,0 @@ -.theorem-callout { - --callout-color: 238, 15, 149; - border-top: none; - border-bottom: none; - border-left: 5px solid rgb(var(--callout-color)); - border-right: none; - border-radius: 0px; - box-shadow: none; - padding: 0px; - font-family: CMU Serif; -} - -.theorem-callout .callout-title { - padding: 6px; - padding-left: 12px; -} - -.theorem-callout .callout-icon { - display: none; -} - -.theorem-callout .callout-title-inner { - font-family: Inter; - font-weight: 400; - color: rgb(var(--callout-color)); -} - -.theorem-callout-subtitle { - font-weight: 200; -} - -.theorem-callout .callout-content { - background-color: var(--background-primary); - padding: 1px 20px 2px 20px; -} diff --git a/styles/vivid.scss b/styles/vivid.scss new file mode 100644 index 0000000..1eba1b1 --- /dev/null +++ b/styles/vivid.scss @@ -0,0 +1,44 @@ +@mixin vivid { + + /* + If you're going to use this file as a CSS snippet, only include the code between + the START and END comments to your snippet file. + */ + /* START */ + .theorem-callout { + --callout-color: 238, 15, 149; + border-top: none; + border-bottom: none; + border-left: var(--size-2-2) solid rgb(var(--callout-color)); + border-right: none; + border-radius: 0px; + box-shadow: none; + padding: 0px; + font-family: CMU Serif, Times, Noto Serif JP; + } + + .theorem-callout .callout-title { + padding: var(--size-2-3); + padding-left: var(--size-4-3); + } + + .theorem-callout .callout-icon { + display: none; + } + + .theorem-callout .callout-title-inner { + font-family: Inter; + font-weight: normal; + color: rgb(var(--callout-color)); + } + + .theorem-callout-subtitle { + font-weight: lighter; + } + + .theorem-callout .callout-content { + background-color: var(--background-primary); + padding: 1px 20px 2px 20px; + } + /* END */ +} \ No newline at end of file