:art: code

app/appearance/themes/daylight/theme.css

@@ -186,6 +186,6 @@
     mix-blend-mode: multiply;
 }
 
-.b3-typography .hljs, .protyle-wysiwyg .hljs {
+.b3-typography .code-block, .protyle-wysiwyg .code-block {
     background-color: rgba(27, 31, 35, .05);
 }

app/src/assets/scss/component/_typography.scss

@@ -266,12 +266,13 @@
     color: var(--b3-theme-background);
   }
 
-  .code-block {
-    position: relative;
+  pre.code-block {
+    border-radius: var(--b3-border-radius);
+  }
+
+  .code-block:not(pre) {
     padding: 2em 1em 1.6em;
     margin: 1em 0;
-    display: flex;
-    flex-direction: row-reverse;
     box-sizing: border-box;
 
     .protyle-action {
@@ -302,8 +303,7 @@
     }
   }
 
-  div.hljs,
-  code.hljs {
+  .hljs {
     font-size: 85%;
     overflow: auto;
     font-family: var(--b3-font-family-code);

app/src/protyle/export/util.ts

@@ -169,6 +169,9 @@ export const exportImage = (id: string) => {
         if (response.data.attrs.alias) {
             previewElement.setAttribute("alias", response.data.attrs.alias);
         }
+        previewElement.querySelectorAll(".code-block").forEach(item => {
+            item.setAttribute("linewrap", "true");
+        });
         processRender(previewElement);
         highlightRender(previewElement);
         previewElement.querySelectorAll("table").forEach((item: HTMLElement) => {