@cherry-markdown/cherry-markdown-dev 0.8.58-dev

package/src/sass/markdown.scss

@@ -0,0 +1,668 @@
+@import './variable.scss';
+
+.cherry-markdown {
+  word-break: break-all;
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6,
+  .h1,
+  .h2,
+  .h3,
+  .h4,
+  .h5,
+  .h6 {
+    font-family: inherit;
+    font-weight: 700;
+    line-height: 1.1;
+    color: inherit;
+  }
+
+  h1 small,
+  h2 small,
+  h3 small,
+  h4 small,
+  h5 small,
+  h6 small,
+  .h1 small,
+  .h2 small,
+  .h3 small,
+  .h4 small,
+  .h5 small,
+  .h6 small,
+  h1 .small,
+  h2 .small,
+  h3 .small,
+  h4 .small,
+  h5 .small,
+  h6 .small,
+  .h1 .small,
+  .h2 .small,
+  .h3 .small,
+  .h4 .small,
+  .h5 .small,
+  .h6 .small {
+    font-weight: normal;
+    line-height: 1;
+    color: #999;
+  }
+
+  h1,
+  h2,
+  h3 {
+    margin-top: 30px;
+    margin-bottom: $elementGap;
+  }
+
+  h1 small,
+  h2 small,
+  h3 small,
+  h1 .small,
+  h2 .small,
+  h3 .small {
+    font-size: 65%;
+  }
+
+  h4,
+  h5,
+  h6 {
+    margin-top: $elementLittleGap;
+    margin-bottom: $elementLittleGap;
+  }
+
+  h4 small,
+  h5 small,
+  h6 small,
+  h4 .small,
+  h5 .small,
+  h6 .small {
+    font-size: 75%;
+  }
+
+  h1,
+  .h1 {
+    font-size: 2em;
+  }
+
+  h2,
+  .h2 {
+    font-size: 1.5em;
+  }
+
+  h3,
+  .h3 {
+    font-size: 1.25em;
+  }
+
+  h4,
+  .h4 {
+    font-size: 1em;
+  }
+
+  h5,
+  .h5 {
+    font-size: 0.875em;
+  }
+
+  h6,
+  .h6 {
+    font-size: 0.85em;
+  }
+
+  b,
+  strong {
+    font-weight: bold;
+  }
+
+  ul,
+  ol {
+    padding-left: 24px;
+    margin-bottom: $elementGap;
+
+    ul,
+    ol {
+      margin-bottom: 0;
+    }
+
+    li {
+      list-style: inherit;
+      p {
+        margin: 0;
+      }
+    }
+  }
+
+  div {
+    ul,
+    ol {
+      margin-bottom: 0;
+    }
+  }
+
+  hr {
+    height: 0;
+    border: 0;
+    border-top: 1px solid $borderColor;
+    margin: $elementGap 0;
+    box-sizing: content-box;
+    overflow: visible;
+  }
+
+  kbd {
+    border: 1px solid $borderColor;
+    border-radius: 4px;
+    padding: 1px 2px;
+    box-sizing: border-box;
+    box-shadow: inset 0px -1px $borderColor;
+    font-size: 0.85rem;
+  }
+
+  table {
+    border-collapse: collapse;
+    th,
+    td {
+      border: 1px solid $borderColor;
+      padding: 0.2em 0.4em;
+      min-width: 100px;
+    }
+    th {
+      background-color: #eee;
+    }
+  }
+
+  .link-quote {
+    color: $linkColor;
+  }
+
+  a {
+    color: $linkColor;
+    position: relative;
+    text-decoration: none;
+
+    &[target='_blank'] {
+      padding: 0 2px;
+
+      &::after {
+        content: '\EA10';
+        font-size: 12px;
+        font-family: 'ch-icon';
+        margin: 0 2px;
+      }
+    }
+
+    &:hover {
+      color: $linkHoverColor;
+    }
+  }
+
+  em {
+    font-style: italic;
+  }
+
+  sup {
+    vertical-align: super;
+  }
+
+  sub {
+    vertical-align: sub;
+  }
+
+  figure {
+    overflow-x: auto;
+  }
+
+  p,
+  pre,
+  blockquote,
+  table {
+    margin: 0 0 $elementGap;
+  }
+
+  blockquote {
+    color: $quoteColor;
+    padding: 10px 15px;
+    border-left: 10px solid $quoteBorderColor;
+    background: $quoteBackground;
+    p, blockquote, table, pre, ul, ol{
+      margin: 0;
+    }
+  }
+
+  pre {
+    padding: 16px;
+    overflow: auto;
+    font-size: 85%;
+    line-height: 1.45;
+    background-color: #f6f8fa;
+    border-radius: 6px;
+  }
+
+  // 适配历史文章样式
+  @import 'prettyprint/prettyprint.scss';
+
+  div[data-type='codeBlock'] {
+    display: inline-block;
+    width: 100%;
+    box-sizing: border-box;
+    border-radius: 2px;
+    margin-bottom: 16px;
+    font-size: 14px;
+    overflow-x: auto;
+
+    & > pre {
+      margin: 0;
+      code[class*='language-'] {
+        counter-reset: line;
+        &.wrap {
+          white-space: pre-wrap;
+        }
+        .code-line {
+          display: inline-block;
+          position: relative;
+          padding-left: 3em;
+          height: 1.3em;
+          line-height: 2em;
+          &:before {
+            counter-increment: line;
+            content: counter(line);
+            margin-right: 1em;
+            position: absolute;
+            left: 0;
+          }
+          &:last-child {
+            margin-bottom: 0;
+          }
+        }
+      }
+    }
+  }
+
+  /* Inline code */
+  :not(pre) > code {
+    padding: 0.1em;
+    border-radius: 0.3em;
+    white-space: normal;
+    color: #f85353;
+    background-color: #e5e5e5;
+
+    [data-inline-code-theme='black'] & {
+      color: #3f4a56;
+      background-color: #e5e5e5;
+    }
+  }
+
+  a.anchor:before {
+    content: '\a7'; // §
+    text-decoration: none;
+    width: 15px;
+    font-size: 0.5em;
+    vertical-align: middle;
+    display: inline-block;
+    text-align: center;
+    margin-left: -15px;
+  }
+
+  .toc {
+    margin-bottom: $elementGap;
+    padding-left: 0;
+
+    .toc-title {
+      font-size: 24px;
+      margin-bottom: 5px;
+    }
+
+    .toc-li {
+      border-bottom: 1px ridge $borderColor;
+      list-style: none;
+
+      a {
+        text-decoration: none;
+        color: $fontColor;
+
+        &:hover {
+          color: $linkHoverColor;
+        }
+      }
+    }
+  }
+
+  .auto-num-toc {
+    counter-reset: headtoclevel1;
+
+    .toc-li-1 {
+      counter-reset: headtoclevel2;
+      a:before {
+        counter-increment: headtoclevel1;
+        content: counter(headtoclevel1) ". "
+      }
+    }
+
+    .toc-li-2 {
+      counter-reset: headtoclevel3;
+      a:before {
+        counter-increment: headtoclevel2;
+        content: counter(headtoclevel1) "." counter(headtoclevel2) ". "
+      }
+    }
+
+    .toc-li-3 {
+      counter-reset: headtoclevel4;
+      a:before {
+        counter-increment: headtoclevel3;
+        content: counter(headtoclevel1) "." counter(headtoclevel2) "." counter(headtoclevel3) ". "
+      }
+    }
+
+    .toc-li-4 {
+      counter-reset: headtoclevel5;
+      a:before {
+        counter-increment: headtoclevel4;
+        content: counter(headtoclevel1) "." counter(headtoclevel2) "." counter(headtoclevel3) "." counter(headtoclevel4) ". "
+      }
+    }
+
+    .toc-li-5 {
+      counter-reset: headtoclevel6;
+      a:before {
+        counter-increment: headtoclevel5;
+        content: counter(headtoclevel1) "." counter(headtoclevel2) "." counter(headtoclevel3) "." counter(headtoclevel4) "." counter(headtoclevel5) ". "
+      }
+    }
+
+    .toc-li-6 {
+      a:before {
+        counter-increment: headtoclevel6;
+        content: counter(headtoclevel1) "." counter(headtoclevel2) "." counter(headtoclevel3) "." counter(headtoclevel4) "." counter(headtoclevel5) "." counter(headtoclevel6) ". "
+      }
+    }
+  }
+
+  .check-list-item {
+    list-style: none;
+
+    .ch-icon {
+      margin: 0 6px 0 -20px;
+    }
+  }
+
+  .footnote:not(a) {
+    .footnote-title {
+      font-size: 20px;
+      margin-top: -38px;
+      background-color: $editorBg;
+      width: 60px;
+      margin-bottom: $elementGap;
+    }
+
+    padding-top: 20px;
+    border-top: 1px solid $borderColor;
+    margin-top: 50px;
+
+    .one-footnote {
+      color: $subTitle;
+      margin-bottom: $elementGap;
+      border-bottom: 1px dotted $borderColor;
+    }
+  }
+
+  .cherry-table-container {
+    max-width: 100%;
+    overflow-x: auto;
+    .cherry-table {
+      th,
+      td {
+        border: 1px solid $borderColor;
+        padding: 0.2em 0.4em;
+        min-width: 100px;
+      }
+      th {
+        white-space: nowrap;
+      }
+    }
+  }
+
+  /* 数学表达式展示 */
+  mjx-assistive-mml {
+    position: absolute;
+    top: 0;
+    left: 0;
+    clip: rect(1px, 1px, 1px, 1px);
+    padding: 1px 0 0 0;
+    border: 0;
+  }
+
+  &.head-num {
+    // Auto Numbering for Headings
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6 {
+      .anchor:before {
+        width: auto;
+        font-size: inherit;
+        vertical-align: inherit;
+        padding-right: 10px;
+      }
+    }
+
+    counter-reset: level1;
+
+    h1 {
+      counter-reset: level2;
+    }
+
+    h2 {
+      counter-reset: level3;
+    }
+
+    h3 {
+      counter-reset: level4;
+    }
+
+    h4 {
+      counter-reset: level5;
+    }
+
+    h5 {
+      counter-reset: level6;
+    }
+
+    h1 .anchor:before {
+      counter-increment: level1;
+      content: counter(level1) '. ';
+    }
+
+    h2 .anchor:before {
+      counter-increment: level2;
+      content: counter(level1) '.' counter(level2) ' ';
+    }
+
+    h3 .anchor:before {
+      counter-increment: level3;
+      content: counter(level1) '.' counter(level2) '.' counter(level3) ' ';
+    }
+
+    h4 .anchor:before {
+      counter-increment: level4;
+      content: counter(level1) '.' counter(level2) '.' counter(level3) '.' counter(level4) ' ';
+    }
+
+    h5 .anchor:before {
+      counter-increment: level5;
+      content: counter(level1) '.' counter(level2) '.' counter(level3) '.' counter(level4) '.' counter(level5) ' ';
+    }
+
+    h6 .anchor:before {
+      counter-increment: level6;
+      content: counter(level1) '.' counter(level2) '.' counter(level3) '.' counter(level4) '.' counter(level5) '.'
+        counter(level6) ' ';
+    }
+  }
+}
+
+div[data-type='codeBlock'] {
+  @import 'prism/tomorrow-night';
+
+  div[data-code-wrap='wrap'] & code[class*=language-]{
+    white-space: pre-wrap;
+  }
+
+  [data-code-block-theme='default'] & {
+    @import 'prism/default';
+  }
+
+  [data-code-block-theme='dark'] & {
+    @import 'prism/dark';
+  }
+
+  [data-code-block-theme='one-dark'] & {
+    @import 'prism/one-dark';
+  }
+
+  [data-code-block-theme='one-light'] & {
+    @import 'prism/one-light';
+  }
+
+  [data-code-block-theme='vs-dark'] & {
+    @import 'prism/vs-dark';
+  }
+
+  [data-code-block-theme='vs-light'] & {
+    @import 'prism/vs-light';
+  }
+
+  [data-code-block-theme='okaidia'] & {
+    @import 'prism/okaidia';
+  }
+
+  [data-code-block-theme='twilight'] & {
+    @import 'prism/twilight';
+  }
+
+  [data-code-block-theme='coy'] & {
+    @import 'prism/coy';
+  }
+
+  [data-code-block-theme='solarized-light'] & {
+    @import 'prism/solarized-light';
+  }
+}
+
+.cherry-detail {
+  details {
+    background: #f8f9faaa;
+    border-radius: 8px;
+    overflow: hidden;
+    margin-bottom: 10px;
+    summary {
+      user-select: none;
+      padding: 5px 10px;
+      background-color: #6c757d;
+      color: #fff;
+      border-radius: 8px;
+    }
+    .cherry-detail-body {
+      padding: 15px 25px 0 25px;
+    }
+  }
+}
+
+.cherry-detail__multiple {
+  border-radius: 8px;
+  overflow: hidden;
+  details {
+    margin-bottom: 1px;
+    border-radius: 0;
+    border: none;
+    summary {
+      border-radius: 0;
+    }
+  }
+}
+
+.cherry-text-align__center {
+  table {
+    margin-left: auto;
+    margin-right: auto;
+  }
+}
+
+.cherry-text-align__right {
+  table {
+    margin-left: auto;
+  }
+}
+
+.cherry-panel {
+  margin: 10px 0;
+  overflow: hidden;
+  border-radius: 8px;
+  box-sizing: border-box;
+  border: 0.5px solid;
+  .cherry-panel--title {
+    color: #fff;
+    padding: 5px 20px;
+    &.cherry-panel--title__not-empty::before {
+      font-family: 'ch-icon';
+      margin: 0 12px 0 -6px;
+      vertical-align: bottom;
+    }
+  }
+  .cherry-panel--body {
+    padding: 5px 20px;
+  }
+}
+.cherry-panel__primary {
+  background-color: #cfe2ff;
+  color: #0a58ca;
+  .cherry-panel--title {
+    background-color: #0d6dfe;
+    &.cherry-panel--title__not-empty::before {
+      content: '\EA6A';
+    }
+  }
+}
+.cherry-panel__info {
+  background-color: #cff4fc;
+  color: #087990;
+  .cherry-panel--title {
+    background-color: #099cba;
+    &.cherry-panel--title__not-empty::before {
+      content: '\EA69';
+    }
+  }
+}
+.cherry-panel__warning {
+  background-color: #fff3cd;
+  color: #997404;
+  .cherry-panel--title {
+    background-color: #b38806;
+    &.cherry-panel--title__not-empty::before {
+      content: '\EA6B';
+    }
+  }
+}
+.cherry-panel__danger {
+  background-color: #f8d7da;
+  color: #b02a37;
+  .cherry-panel--title {
+    background-color: #dc3545;
+    &.cherry-panel--title__not-empty::before {
+      content: '\EA68';
+    }
+  }
+}
+.cherry-panel__success {
+  background-color: #d1e7dd;
+  color: #146c43;
+  .cherry-panel--title {
+    background-color: #198754;
+    &.cherry-panel--title__not-empty::before {
+      content: '\EA67';
+    }
+  }
+}

package/src/sass/markdown_pure.scss

@@ -0,0 +1,9 @@
+@import './markdown.scss';
+/** 引入自带的主题 */
+@import './themes/default.scss';
+@import './themes/dark.scss';
+@import './themes/light.scss';
+@import './themes/green.scss';
+@import './themes/red.scss';
+@import './themes/violet.scss';
+@import './themes/blue.scss';