diff --git a/libs/tiptap-editor/src/style.css b/libs/tiptap-editor/src/style.css
index 10d7656..1f02d5f 100644
--- a/libs/tiptap-editor/src/style.css
+++ b/libs/tiptap-editor/src/style.css
@@ -758,12 +758,6 @@
   cursor: not-allowed;
 }
 
-/* 编辑器内 runnable 代码块视觉提示:左侧绿色边框 */
-.tiptap-editor pre:has(code[class*='runnable']) {
-  border-left: 3px solid #40a02b;
-  padding-left: 12px;
-}
-
 /* ========== Dark Theme: Runnable Modal (Mocha) ========== */
 .dark .tiptap-runnable-modal {
   /* Mocha mantle */
@@ -817,10 +811,6 @@
   color: #1e1e2e;
 }
 
-.dark .tiptap-editor pre:has(code[class*='runnable']) {
-  border-left-color: #a6e3a1;
-}
-
 /* ========== Code Block Syntax Highlighting (Catppuccin Latte) ========== */
 /* 色值取自 @catppuccin/highlightjs@1.0.1,与读者侧 public/highlight.css(syntect Catppuccin)同一 palette。
    scope 到 .tiptap-editor pre code,避免污染全站 code 元素。
@@ -936,3 +926,114 @@
   color: #f38ba8;
   background: rgba(243, 139, 168, 0.15);
 }
+
+/* ========== Code Block NodeView (toolbar + result) ========== */
+.tiptap-codeblock {
+  position: relative;
+  margin: 1em 0;
+}
+
+.tiptap-codeblock-toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  padding: 4px 12px;
+  /* Latte crust（与 pre 背景协调） */
+  background: #dce0e8;
+  border-radius: 6px 6px 0 0;
+  font-size: 12px;
+  font-family:
+    -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+}
+
+/* pre 紧贴 toolbar 下方，合并圆角 */
+.tiptap-codeblock > pre {
+  margin: 0;
+  border-radius: 0 0 6px 6px;
+}
+
+/* runnable 块绿条移到容器左侧（避免与 pre padding 冲突） */
+.tiptap-codeblock:has(code[class*='runnable']) {
+  border-left: 3px solid #40a02b;
+  padding-left: 0;
+}
+.tiptap-codeblock:has(code[class*='runnable']) > pre {
+  padding-left: 13px;
+}
+
+.tiptap-codeblock-lang {
+  /* Latte subtext0 */
+  color: #6c6f85;
+  font-weight: 500;
+  text-transform: lowercase;
+}
+
+.tiptap-codeblock-run {
+  border: none;
+  border-radius: 4px;
+  padding: 2px 10px;
+  font-size: 12px;
+  cursor: pointer;
+  /* Catppuccin green */
+  background: #40a02b;
+  color: #fff;
+}
+
+.tiptap-codeblock-run:hover:not(:disabled) {
+  background: #3a8f26;
+}
+
+.tiptap-codeblock-run:disabled {
+  opacity: 0.6;
+  cursor: wait;
+}
+
+.tiptap-codeblock-result {
+  margin-top: 4px;
+  padding: 8px 12px;
+  border-radius: 6px;
+  /* Latte surface0 */
+  background: #ccd0da;
+  font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, monospace;
+  font-size: 12px;
+  /* Latte text */
+  color: #4c4f69;
+  white-space: pre-wrap;
+  word-break: break-all;
+  max-height: 300px;
+  overflow-y: auto;
+}
+
+/* ========== Dark Theme: Code Block NodeView (Mocha) ========== */
+.dark .tiptap-codeblock-toolbar {
+  /* Mocha crust */
+  background: #11111b;
+}
+
+.dark .tiptap-codeblock:has(code[class*='runnable']) {
+  border-left-color: #a6e3a1;
+}
+
+.dark .tiptap-codeblock-lang {
+  /* Mocha subtext0 */
+  color: #a6adc8;
+}
+
+.dark .tiptap-codeblock-run {
+  /* Mocha green */
+  background: #a6e3a1;
+  /* Mocha base */
+  color: #1e1e2e;
+}
+
+.dark .tiptap-codeblock-run:hover:not(:disabled) {
+  background: #95d88f;
+}
+
+.dark .tiptap-codeblock-result {
+  /* Mocha surface0 */
+  background: #313244;
+  /* Mocha text */
+  color: #cdd6f4;
+}