refactor: codeblock (#1225)

* refactor: codeblock * feat: implement wrap and toggle open animation * chore: handle max-height calculation correctly * chore: remove unnecessary js * chore: remove clipboardjs * feat: use icons * feat: add text wrap icon * feat: add style to icons * refactor: switch to typescript * chore: add global declaration * chore: optimise image resize method * fix: sharer wechat and mastodon icon Close #1247 * Disable autoplay (#1249) * Improve the `bilibili` shortcode with more options (#1250) * add variables * finished the initial dev of bilibili improvement next is documentation * rearrange bilibili options * added documentation for improved bilibili shortcode * fluent chinese * chore: disableHTTPCache for dev env * refactor: color scheme #1245 (#1253) * refactor: color scheme * refactor: colors in Tailwind Config * fix: scss variables use error * feat: partially adopt Prime Design for the dark theme * feat: pick selection color * feat: pick link color * feat: pick codeblock, table, blockquote color * feat: pick more colors * refactor: remove black theme * fix: code background color * refactor: extract primitive colors * refactor: use primitive colors in tailwind config * chore: use --verbose * chore: sync github CI build step --------- Co-authored-by: PCloud <[email protected]> * chore: re-enable counter * fix: syntax highlightning * chore: format code * fix(style): do not wrap line number * feat: make line numbers fix position * chore: bad idea, revert * refactor: move all js logic into theme.ts * feat: support copy icon states * feat: implement line number toggle * feat: move all JavaScript to theme.ts * feat: support custom title * feat: init all states * feat: support maxShownLines * fix: correct color scheme * chore: switch icon back to svg * feat: expand code blocks before print * deprecate copy option * feat: add titles to buttons * feat: add docs * feat: support wrap option --------- Co-authored-by: CXwudi <[email protected]> Co-authored-by: 恐咖兵糖 <[email protected]>
HEIGE-PCloud · Apr 28, 2024 · be3cb04 · be3cb04
1 parent 4124d0e
commit be3cb04
Show file tree

Hide file tree

Showing 21 changed files with 621 additions and 318 deletions.
diff --git a/README.md b/README.md
@@ -216,7 +216,6 @@ Thanks to the authors of following resources included in the theme:
 * [object-fit-images](https://github.com/fregante/object-fit-images)
 * [Twemoji](https://github.com/twitter/twemoji)
 * [lightgallery.js](https://github.com/sachinchoolur/lightgallery.js)
-* [clipboard.js](https://github.com/zenorocha/clipboard.js)
 * [Sharer.js](https://github.com/ellisonleao/sharer.js)
 * [TypeIt](https://typeitjs.com/)
 * [KaTeX](https://katex.org/)

diff --git a/README.zh-cn.md b/README.zh-cn.md
@@ -202,7 +202,6 @@ DoIt 主题中用到了以下项目，感谢它们的作者：
 * [object-fit-images](https://github.com/fregante/object-fit-images)
 * [Twemoji](https://github.com/twitter/twemoji)
 * [lightgallery.js](https://github.com/sachinchoolur/lightgallery.js)
-* [clipboard.js](https://github.com/zenorocha/clipboard.js)
 * [Sharer.js](https://github.com/ellisonleao/sharer.js)
 * [TypeIt](https://typeitjs.com/)
 * [KaTeX](https://katex.org/)

diff --git a/assets/css/_partial/_single/_code.scss b/assets/css/_partial/_single/_code.scss
@@ -1,7 +1,6 @@
 code {
   display: inline-block;
   max-width: 100%;
-  padding: 0 .4rem;
   @include overflow-wrap(break-word);
   @include line-break(anywhere);
   font-size: $code-font-size;
@@ -10,15 +9,6 @@ code {
 }
 
 pre {
-  padding: 0;
-  margin: .25rem .5rem .25rem .5rem;
-  @include tab-size(4);
-
-  code {
-    padding: 0;
-    overflow: auto hidden;
-  }
-
   img {
     min-height: 1em;
     max-height: 1.2em;
@@ -52,153 +42,6 @@ pre,
   }
 }
 
-.highlight {
-  line-height: 1.4em;
-  margin: .5rem 0;
-
-  >.chroma {
-    position: relative;
-
-    .code-header {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      box-sizing: border-box;
-      width: 100%;
-      font-family: $global-font-family;
-      font-weight: bold;
-      color: $code-info-color;
-      background: $code-background-color-code-header;
-
-      &:hover {
-        cursor: pointer;
-      }
-
-      .code-title {
-        width: 100%;
-        padding: .4rem;
-      }
-
-      .code-title::after {
-        padding-left: .2rem;
-        content: 'Code';
-      }
-
-      @each $type, $text in $code-type-map {
-        &.#{$type} .code-title::after {
-          content: $text;
-        }
-      }
-    }
-
-    .lntd:first-child {
-      min-width: 1.6rem;
-      text-align: right;
-    }
-
-    .lntd:last-child {
-      width: 100%;
-
-      pre {
-        @include max-content(min-width);
-      }
-    }
-
-    .ln {
-      padding-right: .75rem;
-    }
-
-    .hl {
-      display: block;
-      background-color: $code-background-color-code-hl;
-    }
-
-    .ln,
-    .lnt {
-      color: $global-font-secondary-color;
-    }
-
-    .arrow {
-      padding: 0 .2rem;
-      @include transition(transform 0.2s ease);
-    }
-
-    .ellipses {
-      padding: .4rem;
-    }
-
-    .copy {
-      display: none;
-      padding: .4rem;
-
-      &:hover {
-        cursor: pointer;
-        color: $global-link-hover-color;
-      }
-    }
-
-    .table-wrapper {
-      max-height: 0;
-      overflow: auto hidden;
-      transition: max-height 0.5s ease-out;
-    }
-
-    &.open {
-      .code-header {
-        background: $code-header-color;
-      }
-
-      .table-wrapper {
-        max-height: none;
-      }
-
-      .arrow {
-        @include transform(rotate(90deg));
-      }
-
-      .ellipses {
-        display: none;
-      }
-
-      .copy {
-        display: inline;
-      }
-    }
-  }
-
-  /* Comment */
-  .c,
-  /* CommentHashbang */
-  .ch,
-  /* CommentMultiline */
-  .cm,
-  /* CommentSingle */
-  .c1,
-  /* CommentSpecial */
-  .cs,
-  /* CommentPreproc */
-  .cp,
-  /* CommentPreprocFile */
-  .cpf {
-    font-style: italic
-  }
-
-  /* GenericUnderline */
-  .gl {
-    text-decoration: underline
-  }
-
-  // @each $class, $color in $code-highlight-color-map {
-  //   .#{$class} { color: $color; }
-  // }
-
-  // [theme=dark] & {
-  //   @each $class, $color in $code-highlight-color-map-dark {
-  //     .#{$class} { color: $color; }
-  //   }
-  // }
-}
-
 .gist {
 
   .gist-file,
@@ -215,4 +58,23 @@ pre,
 
   }
 
-}
+}
+
+.show-line-numbers > pre > code > span::before {
+  // line number for code block
+  counter-increment: codeblock;
+  content: counter(codeblock);
+  min-width: 5ch;
+  text-align: center;
+  background: var(--code-background-color);
+  color: var(--global-font-color);
+  text-wrap: nowrap;
+}
+
+pre > code > span > span.cl {
+  margin-left: 1rem;
+}
+
+.show-line-numbers > pre > code > span > span.cl {
+  margin-left: 0;
+}