bug fix

.gitignore

@@ -1,5 +1,6 @@
-# vscode
 .vscode 
 
 node_modules
 
+main.js
+styles.css

README.md

@@ -334,15 +334,16 @@ MIT License
 
 ## Known Issues
 
-- Some features may not work properly depending on the theme you are using. Currently on 2023-02, I checked that the following themes are working properly.
-  - Default Theme
-  - [Minimal Theme](https://github.com/kepano/obsidian-minimal)
-  - [Obsidian Nord](https://github.com/insanum/obsidian_nord)
-  - [Obsidianite](https://github.com/bennyxguo/Obsidian-Obsidianite)
-  - [Sanctum](https://github.com/jdanielmourao/obsidian-sanctum)
-  - [Shimmering Focus](https://github.com/chrisgrieser/shimmering-focus)
-  - [Wasp](https://github.com/santiyounger/Wasp-Obsidian-Theme)
-  - [Typewriter](https://github.com/crashmoney/obsidian-typewriter)
+- Some features may not work properly depending on the theme you are using.
+  - Currently on 2023-02, I checked that the following themes are working properly.
+    - Default Theme
+    - [Minimal Theme](https://github.com/kepano/obsidian-minimal)
+    - [Obsidian Nord](https://github.com/insanum/obsidian_nord)
+    - [Sanctum](https://github.com/jdanielmourao/obsidian-sanctum)
+    - [Shimmering Focus](https://github.com/chrisgrieser/shimmering-focus)
+    - [Wasp](https://github.com/santiyounger/Wasp-Obsidian-Theme)
+    - [Typewriter](https://github.com/crashmoney/obsidian-typewriter)
+  - Most of the theme problem is caused by the usage of `!important` keywords in the theme CSS. HK Code Block does not use `!important` keywords at all in order to avoid conflicts with other themes or plugins. If you want to use HK Code Block plugin with those themes, you should modify the theme CSS files, or by using `!important` keywords, you should explicitly increase the priority of the HK Code Block CSS rules.
 
 ## Changelog
 

README_ko.md

@@ -334,15 +334,16 @@ MIT License
 
 ## 알려진 문제점
 
-- 테마별 설정에 따라 몇몇 기능들이 제대로 동작하지 않을 수 있습니다. 2023년 02월 현재, 정상 동작을 시험해본 테마는 다음과 같습니다.
-  - Default Theme
-  - [Minimal Theme](https://github.com/kepano/obsidian-minimal)
-  - [Obsidian Nord](https://github.com/insanum/obsidian_nord)
-  - [Obsidianite](https://github.com/bennyxguo/Obsidian-Obsidianite)
-  - [Sanctum](https://github.com/jdanielmourao/obsidian-sanctum)
-  - [Shimmering Focus](https://github.com/chrisgrieser/shimmering-focus)
-  - [Wasp](https://github.com/santiyounger/Wasp-Obsidian-Theme)
-  - [Typewriter](https://github.com/crashmoney/obsidian-typewriter)
+- 테마별 설정에 따라 몇몇 기능들이 제대로 동작하지 않을 수 있습니다.
+  - 2023년 02월 현재, 정상 동작을 시험해본 테마는 다음과 같습니다.
+    - Default Theme
+    - [Minimal Theme](https://github.com/kepano/obsidian-minimal)
+    - [Obsidian Nord](https://github.com/insanum/obsidian_nord)
+    - [Sanctum](https://github.com/jdanielmourao/obsidian-sanctum)
+    - [Shimmering Focus](https://github.com/chrisgrieser/shimmering-focus)
+    - [Wasp](https://github.com/santiyounger/Wasp-Obsidian-Theme)
+    - [Typewriter](https://github.com/crashmoney/obsidian-typewriter)
+  - 테마 문제의 대부분은 해당 테마들이 CSS에 `!important` 키워드를 붙여 HK Code Block의 CSS 우선순위가 밀려 발생합니다. HK Code Block은 다른 테마, 플러그인과의 호환성을 위해 `!important` 키워드를 사용하지 않습니다. 만약 이런 테마들에서도 HK Code Block을 사용하고 싶다면 해당 테마의 CSS를 수정하거나 `!important` 등을 사용, HK Code Block의 CSS 우선순위를 직접 높여야 합니다.
 
 ## Changelog
 

src/HKCodeBlockProcessor.ts

@@ -326,7 +326,7 @@ export async function HKCodeBlockProcessor(
   ) {
     elem_div.classList.add("hk-codeblock-show-linenos");
 
-    const elem_linenos = document.createElement("code");
+    const elem_linenos = document.createElement("div");
     elem_linenos.classList.add("hk-codeblock-linenos");
     elem_linenos.innerText = Array(linenosNum).fill(0).map((_, idx) => idx + linenosStart).join("\n");
     elem_pre.insertBefore(elem_linenos, elem_code);
@@ -381,7 +381,7 @@ export async function HKCodeBlockProcessor(
   ) {
     elem_div.classList.add("hk-codeblock-show-prompt");
 
-    const elem_prompt = document.createElement("code");
+    const elem_prompt = document.createElement("div");
     elem_prompt.classList.add("hk-codeblock-prompt");
     
     const lines = elem_code.innerText.split("\n");

src/styles.scss

@@ -6,12 +6,15 @@
     --hk-codeblock-vertical-padding: 8px;
     --hk-codeblock-background-color: var(--code-background);
     --hk-codeblock-border-color: var(--divider-color); // applied to title, linenos, and result
+    --hk-codeblock-font-size: var(--code-size);
     --hk-codeblock-title-text-color: var(--text-normal);
     --hk-codeblock-linenos-text-color: var(--code-normal);
+    --hk-codeblock-linenos-text-font: var(--font-monospace);
     --hk-codeblock-language-text-color: var(--text-muted); // same with copy button
     --hk-codeblock-language-text-size: var(--font-ui-smaller); // same with copy button
     --hk-codeblock-language-text-font: var(--font-interface); // same with copy button
     --hk-codeblock-prompt-text-color: var(--code-normal);
+    --hk-codeblock-prompt-text-font: var(--font-monospace);
     --hk-codeblock-result-text-color: var(--text-normal);
   }
 
@@ -119,14 +122,19 @@
 /* linenos */
 .hk-codeblock.hk-codeblock-show-linenos {
   pre {
-    code.hk-codeblock-linenos {
+    .hk-codeblock-linenos {
       flex-shrink: 0;
       flex-grow: 0;
       text-align: right;
+      padding: 0;
       padding-right: 1em;
       opacity: 0.6;
       user-select: none;
       color: var(--hk-codeblock-linenos-text-color);
+      white-space: pre;
+      font-family: var(--hk-codeblock-linenos-text-font);
+      font-size: var(--hk-codeblock-font-size);
+      background-color: transparent;
 
       &.show-splitter {
         border-right: 1px solid var(--hk-codeblock-border-color);
@@ -197,14 +205,19 @@
 /* prompt */
 .hk-codeblock.hk-codeblock-show-prompt {
   pre {
-    code.hk-codeblock-prompt {
+    .hk-codeblock-prompt {
       flex-shrink: 0;
       flex-grow: 0;
       text-align: right;
+      padding: 0;
       padding-right: 0.8em;
       opacity: 0.6;
       user-select: none;
       color: var(--hk-codeblock-prompt-text-color);
+      white-space: pre;
+      font-family: var(--hk-codeblock-prompt-text-font);
+      font-size: var(--hk-codeblock-font-size);
+      background-color: transparent;
     }
   }
 }