diff --git a/app/src/assets/scss/_typography.scss b/app/src/assets/scss/_typography.scss
index 5d3769b06..4fb669725 100644
--- a/app/src/assets/scss/_typography.scss
+++ b/app/src/assets/scss/_typography.scss
@@ -49,7 +49,8 @@
     color: var(--b3-protyle-inline-em-color);
   }
 
-  s {
+  s,
+  span[data-type~="s"] {
     color: var(--b3-protyle-inline-s-color);
   }
 
@@ -58,7 +59,8 @@
     color: var(--b3-protyle-inline-strong-color);
   }
 
-  mark {
+  mark,
+  span[data-type~="mark"] {
     background-color: var(--b3-protyle-inline-mark-background);
     color: var(--b3-protyle-inline-mark-color);
 
@@ -146,7 +148,8 @@
     }
   }
 
-  kbd {
+  kbd,
+  span[data-type~="kbd"] {
     padding: 2px 4px;
     font: 75% Consolas, "Liberation Mono", Menlo, Courier, monospace;
     line-height: 1;
@@ -206,7 +209,8 @@
     }
   }
 
-  code:not(.hljs) {
+  code:not(.hljs),
+  span[data-type~="code"] {
     @extend .fn__code;
   }
 
diff --git a/app/src/assets/scss/_wysiwyg.scss b/app/src/assets/scss/_wysiwyg.scss
index c6308965a..b284e2ef6 100644
--- a/app/src/assets/scss/_wysiwyg.scss
+++ b/app/src/assets/scss/_wysiwyg.scss
@@ -177,6 +177,26 @@
       font-style: italic;
     }
 
+    span[data-type~="sup"],
+    span[data-type~="sub"] {
+      position: relative;
+      font-size: 75%;
+      line-height: 0;
+      vertical-align: baseline;
+    }
+
+    span[data-type~="sup"] {
+      top: -0.5em;
+    }
+
+    span[data-type~="sub"] {
+      bottom: -0.25em;
+    }
+
+    span[data-type~="s"] {
+      text-decoration: line-through;
+    }
+
     span[data-type="tag"] {
       border-bottom: 1px solid var(--b3-protyle-inline-tag-color);
       color: var(--b3-protyle-inline-tag-color);
diff --git a/app/src/protyle/toolbar/index.ts b/app/src/protyle/toolbar/index.ts
index bb84a5dd4..343441c5b 100644
--- a/app/src/protyle/toolbar/index.ts
+++ b/app/src/protyle/toolbar/index.ts
@@ -287,6 +287,7 @@ export class Toolbar {
         const actionBtn = action === "toolbar" ? this.element.querySelector(`[data-type="${type}"]`) : undefined;
         const newNodes: Node[] = [];
         if (action === "remove" || actionBtn?.classList.contains("protyle-toolbar__item--current")) {
+            actionBtn.classList.remove("protyle-toolbar__item--current");
             let removeIndex = 0
             contents.childNodes.forEach((item: HTMLElement, index) => {
                 if (item.tagName === "WBR") {
@@ -321,6 +322,7 @@ export class Toolbar {
                 removeIndex++
             });
         } else {
+            this.element.querySelector(`[data-type="${type}"]`).classList.add("protyle-toolbar__item--current");
             let addIndex = 0
             contents.childNodes.forEach((item: HTMLElement, index) => {
                 if (item.nodeType === 3) {