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>
  `
  }