Skip to content

Commit

Permalink
feat(mermaid): add dark mode support for mermaid
Browse files Browse the repository at this point in the history
  • Loading branch information
xinkeng0 committed Dec 1, 2024
1 parent 36faca9 commit 82e0317
Show file tree
Hide file tree
Showing 4 changed files with 16 additions and 6 deletions.
1 change: 1 addition & 0 deletions src/main/java/run/halo/plugin/textdiagram/BasicConfig.java
Original file line number Diff line number Diff line change
Expand Up @@ -4,5 +4,6 @@

@Data
public class BasicConfig {
String dark_class_selector;
String mermaid_selector;
}
Original file line number Diff line number Diff line change
Expand Up @@ -15,15 +15,15 @@ public class DefaultPostContentHandler implements ReactivePostContentHandler {

private final ReactiveSettingFetcher reactiveSettingFetcher;

private static void injectJS(PostContentContext contentContext, String mermaid_selector) {
String parsedScript = JSInjector.getParsedKatexScript(mermaid_selector);
private static void injectJS(PostContentContext contentContext, BasicConfig basicConfig) {
String parsedScript = JSInjector.getParsedKatexScript(basicConfig.getDark_class_selector(),basicConfig.getMermaid_selector());
contentContext.setContent(parsedScript + "\n" + contentContext.getContent());
}

@Override
public Mono<PostContentContext> handle(PostContentContext contentContext) {
return reactiveSettingFetcher.fetch("basic", BasicConfig.class).map(basicConfig -> {
injectJS(contentContext, basicConfig.getMermaid_selector());
injectJS(contentContext, basicConfig);
return contentContext;
}).onErrorResume(e -> {
log.error("TextDiagram PostContent handle failed", Throwables.getRootCause(e));
Expand Down
10 changes: 7 additions & 3 deletions src/main/java/run/halo/plugin/textdiagram/JSInjector.java
Original file line number Diff line number Diff line change
@@ -1,19 +1,23 @@
package run.halo.plugin.textdiagram;

public class JSInjector {
static String getParsedKatexScript(String mermaid_selector) {
static String getParsedKatexScript(String darkClassSelector, String mermaid_selector) {
String katexScript = """
<script defer src="/plugins/text-diagram/assets/static/mermaid.min.js"></script>
<script>
document.addEventListener("DOMContentLoaded", function() {
const postBody = document.body
mermaid.initialize({ startOnLoad: false });
let darkModel = document.querySelector('%s')
mermaid.initialize({
startOnLoad: false,
theme: darkModel?'dark':'default'
});
mermaid.run({
querySelector: '%s',
});
});
</script>
""";
return String.format(katexScript, mermaid_selector);
return String.format(katexScript, darkClassSelector, mermaid_selector);
}
}
5 changes: 5 additions & 0 deletions src/main/resources/extensions/settings.yaml
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,11 @@ spec:
- group: basic
label: 基本设置
formSchema:
- $formkit: text
name: dark_class_selector
label: 暗黑模式的选择器
value: "html[class~=dark]"
help: 用于匹配暗黑模式的CSS选择器
- $formkit: text
name: mermaid_selector
label: mermaid-CSS选择器
Expand Down

0 comments on commit 82e0317

Please sign in to comment.