feat: v4.45.1

surmon-china · Sep 12, 2024 · 2128fc1 · 2128fc1
1 parent 5f72e78
commit 2128fc1
Show file tree

Hide file tree

Showing 6 changed files with 91 additions and 97 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "surmon.me",
-  "version": "4.45.0",
+  "version": "4.45.1",
   "description": "Surmon.me blog",
   "author": "Surmon",
   "license": "MIT",

diff --git a/src/components/comment/list/item.vue b/src/components/comment/list/item.vue
@@ -178,7 +178,11 @@
             <i18n zh="：" en=":" />
           </p>
           <div class="markdown">
-            <markdown :markdown="comment.content" :compact="true" :render-options="{ sanitize: true }" />
+            <markdown
+              :markdown="comment.content"
+              :compact="true"
+              :render-options="{ sanitize: true, codeLineNumbers: false }"
+            />
           </div>
         </div>
         <div class="cm-footer">

diff --git a/src/components/comment/publisher/pen.vue b/src/components/comment/publisher/pen.vue
@@ -155,7 +155,11 @@
       </div>
       <transition name="list-fade">
         <div class="preview-content" v-if="isPreviewed">
-          <markdown :markdown="content" :compact="true" :render-options="{ sanitize: true }" />
+          <markdown
+            :markdown="content"
+            :compact="true"
+            :render-options="{ sanitize: true, codeLineNumbers: false }"
+          />
         </div>
       </transition>
     </div>

diff --git a/src/components/common/markdown.vue b/src/components/common/markdown.vue
@@ -16,12 +16,13 @@
   const { element } = useLozad()
   const { isDarkTheme } = useEnhancer()
   const markdownHTML = computed<string>(() => {
-    if (!props.markdown) {
-      return props.html || ''
+    if (props.markdown) {
+      return markdownToHTML(props.markdown, {
+        ...props.renderOptions
+      })
     }
-    return markdownToHTML(props.markdown, {
-      ...props.renderOptions
-    })
+
+    return props.html || ''
   })
 </script>
 
@@ -276,26 +277,36 @@
 
     code {
       vertical-align: middle;
-      padding: 0.2em 0.4em 0.14em;
       margin: 0;
+      padding: 0.2em 0.4em 0.14em;
       border-radius: $radius-sm;
+      border: 1px solid $module-bg-darker-2;
+      background-color: $module-bg-darker-1;
+      color: $color-link;
       font-size: 95%;
     }
 
     pre {
       $code-header-height: 2.8rem;
       $code-number-width: 3rem;
-      $code-row-line-height: 1.8em;
+      $code-row-line-height: 1.68em;
       $code-padding: 0.8rem;
       $code-font-size: $font-size-base;
       position: relative;
       display: flex;
       margin-bottom: 1em;
       padding-top: $code-header-height;
-      padding-left: $code-number-width;
       border-radius: $radius-xs;
       overflow: hidden;
       font-size: $code-font-size;
+      background-color: #f3f3f3;
+      @include background-transition($motion-duration-mid);
+      &.with-line-numbers {
+        padding-left: $code-number-width;
+        code {
+          border-left: none;
+        }
+      }
 
       &::before {
         content: attr(data-lang) ' CODE';
@@ -306,6 +317,7 @@
         width: 100%;
         height: $code-header-height;
         line-height: $code-header-height;
+        background-color: $module-bg-darker-2;
         text-transform: uppercase;
         text-align: center;
         z-index: $z-index-normal + 2;
@@ -322,9 +334,11 @@
         padding-top: $code-header-height + $code-padding;
         width: $code-number-width;
         height: 100%;
-        color: $color-text-divider;
         text-align: center;
         user-select: none;
+        font-size: $code-font-size;
+        background-color: $module-bg-darker-1;
+        color: $color-text-divider;
 
         .code-line-number {
           padding: 0;
@@ -342,22 +356,39 @@
         height: 100%;
         display: block;
         line-height: $code-row-line-height;
-        font-size: $font-size-base;
+        border-radius: 0;
+        border-width: 0 1px 1px 1px;
+        border-color: $module-bg-darker-1;
+        font-size: $code-font-size;
+        background-color: transparent !important;
+        color: #444;
         cursor: text;
       }
     }
 
+    &.dark {
+      pre {
+        background-color: #1e1e1e;
+        &::before {
+          background-color: $module-bg-darker-1;
+        }
+        .code-lines {
+          background-color: $module-bg-darker-3;
+        }
+        code {
+          color: #c9d1d9;
+          border-color: transparent;
+        }
+      }
+    }
+
     &.compact {
       line-height: 2em;
       word-wrap: break-word;
       font-size: $font-size-base;
 
-      p,
-      pre {
-        margin-bottom: $gap;
-      }
-
       p {
+        margin-bottom: $gap;
         text-indent: 0;
         line-height: 2em;
         &:last-child {
@@ -390,68 +421,6 @@
         }
       }
 
-      pre {
-        $code-header-height: 2.5rem;
-        margin-top: 1rem;
-        padding-left: 0;
-        padding-top: $code-header-height;
-        &::before {
-          height: $code-header-height;
-          line-height: $code-header-height;
-        }
-
-        .code-lines {
-          display: none;
-        }
-
-        code {
-          line-height: 1.8;
-        }
-      }
-    }
-  }
-
-  .global-markdown-html {
-    code {
-      border: 1px solid $module-bg-darker-2;
-      background-color: $module-bg-darker-1;
-      color: $color-link;
-    }
-
-    pre {
-      background-color: #f3f3f3;
-      &::before {
-        background-color: $module-bg-darker-2;
-      }
-      .code-lines {
-        background-color: $module-bg-darker-1;
-      }
-      code {
-        color: #444;
-        border-radius: 0;
-        border-width: 0 1px 1px 0;
-        border-color: $module-bg-darker-1;
-        background-color: transparent !important;
-      }
-    }
-
-    &.dark {
-      pre {
-        background-color: #1e1e1e;
-        &::before {
-          background-color: $module-bg-darker-1;
-        }
-        .code-lines {
-          background-color: $module-bg-darker-3;
-        }
-        code {
-          color: #c9d1d9;
-          border-color: transparent;
-        }
-      }
-    }
-
-    &.compact {
       blockquote {
         border-color: $module-bg-darker-3;
         background-color: $module-bg-darker-2;
@@ -463,10 +432,19 @@
       }
 
       pre {
+        $code-header-height: 2.5rem;
+        margin-top: $gap;
+        margin-bottom: $gap;
+        padding-top: $code-header-height;
         border: 1px solid $module-bg-darker-3;
+        &::before {
+          height: $code-header-height;
+          line-height: $code-header-height;
+        }
+
         code {
+          line-height: 1.8;
           border-color: transparent;
-          background-color: transparent;
         }
       }
     }

diff --git a/src/pages/article/share.vue b/src/pages/article/share.vue
@@ -134,7 +134,11 @@
               <markdown
                 class="markdown"
                 :markdown="templateMarkdown"
-                :render-options="{ lazyLoadImage: false, imageSourceGetter: getOriginalProxyURL }"
+                :render-options="{
+                  lazyLoadImage: false,
+                  codeLineNumbers: false,
+                  imageSourceGetter: getOriginalProxyURL
+                }"
               />
               <div class="read-more-mask" v-if="isLongArticle"></div>
             </div>

diff --git a/src/transforms/markdown.ts b/src/transforms/markdown.ts
@@ -190,34 +190,38 @@ const createRenderer = (options?: Partial<RendererCreatorOptions>): Renderer =>
 
   // code: line number
   renderer.code = function ({ text, lang, escaped }) {
+    const code = text.replace(/\n$/, '')
     const langString = (lang || '').match(/^\S*/)?.[0]
-    const code = text.replace(/\n$/, '') + '\n'
-
-    const lineNumbers = code
-      .split('\n')
-      .map((_, i) => `<li class="code-line-number">${i + 1}</li>`.replace(/\s+/g, ' '))
-      .join('')
 
     const readOnlyAttrs = [
       `contenteditable="true"`,
+      `spellcheck="false"`,
       `oncut="return false"`,
       `onpaste="return false"`,
+      `onbeforeinput="return false"`,
       `onkeydown="if(event.metaKey) return true; return false;"`
     ].join(' ')
 
+    const escapedCode = escaped ? code : escape(code)
+    const preClassName = options?.codeLineNumbers ? 'with-line-numbers' : 'default'
+    const lineNumbersList = options?.codeLineNumbers
+      ? `<ul class="code-lines">${code
+          .split('\n')
+          .map((_, i) => `<li class="code-line-number">${i + 1}</li>`.replace(/\s+/g, ' '))
+          .join('')}</ul>`
+      : ''
+
     return langString
       ? `
-        <pre data-lang="${langString}">
-          <ul class="code-lines">${lineNumbers}</ul>
-          <code ${readOnlyAttrs} class="${highlightLangPrefix}${escape(langString)}">${
-            escaped ? code : escape(code)
-          }\n</code>
-        </pre>\n
+        <pre class="${preClassName}" data-lang="${langString}">
+          ${lineNumbersList}
+          <code ${readOnlyAttrs} class="${highlightLangPrefix}${escape(langString)}">${escapedCode}</code>
+        </pre>
       `
       : `
-        <pre>
-          <ul class="code-lines">${lineNumbers}</ul>
-          <code ${readOnlyAttrs}>${escaped ? code : escape(code)}\n</code>
+        <pre class="${preClassName}">
+          ${lineNumbersList}
+          <code ${readOnlyAttrs}>${escapedCode}</code>
         </pre>
       `
   }