标签：markdown cnblogs 自定义 color js -- var font css

页面css

html {
  --body-bg: #fff;
  --font-color: #454d64;
  --border-color: #d8dee4;
  --a-color: #4569d4;
  --theme: #4569d4;
  font-size: 14px;
  --max-width: 1320px;
  --input-bg: #eaecefbf;
  --table-bg: #f9fafb;
  --table-border-color: #ebedf1;
  --box-shadow: 0 0 12px rgb(0 0 0 / 20%);
}
.html-night {
  --body-bg: #242525;
  --font-color: #b3ab9e;
  --border-color: #3f4141;
  --a-color: #6190c6;
  --theme: #32498e;
  --input-bg: #373737;
  --table-bg: #272827;
  --table-border-color: #ebedf1;
  --box-shadow: 0 0 12px rgb(0 0 0 / 88%);
}
body {
  margin: 0;
  padding: 0;
  background-color: var(--body-bg);
  color: var(--font-color);
  line-height: 1.6;
  font-size: 1rem;
  font-family: -apple-system, system-ui, BlinkMacSystemFont, Helvetica Neue,
    PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
}
ul {
  margin: 0;
  padding: 0;
}
li {
  list-style: none;
}
a {
  text-decoration: none;
  color: inherit;
}
input {
  outline: 0;
  background-color: var(--input-bg);
  border: 0;
  color: inherit;
}
#home {
  padding-top: 56px;
}
#top_nav,
#blogTitle,
.blogStats,
#header {
  display: none;
}
header {
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 1000;
  background: #141414;
  color: #9d9d9d;
  line-height: 56px;
  height: 56px;
}
header > div {
  margin: 0 auto;
  max-width: var(--max-width);
}
header > div > #blog-nav {
  padding: 0 32px;
  display: flex;
}
#blog-nav a {
  margin-right: 20px;
}
header a:hover {
  color: #fff;
}
#main {
  box-sizing: border-box;
  margin: 0 auto;
  max-width: var(--max-width);
  display: flex;
  align-items: flex-start;
}
#mainContent {
  flex: 1;
  overflow: hidden;
  padding: 1px 32px;
}
#mainContent > .forFlow > div,
#myposts {
  padding: 0;
  margin: 0;
}
#mainContent > .forFlow > .PostListTitle,
#mainContent .category-block-title,
#mainContent .entrylistTitle {
  font-size: 18px;
  line-height: 42px;
  margin: 0;
  padding: 0;
  font-style: italic;
  text-align: center;
  border-bottom: 1px solid var(--border-color);
}
#myposts > .PostList {
  margin: 0;
}
#myPosts > div {
  margin: 0;
  font-size: inherit;
}
#mainContent .dayTitle a {
  display: none;
}
.postTitl2 a,
.postTitle2,
.entrylistPosttitle {
  display: block;
  font-size: 16px;
  font-weight: 600;
  padding: 16px 0;
}
.c_b_p_desc {
  color: #7d7d7d;
}
.day .postDesc,
#myposts .postDesc2,
.entrylistItemPostDesc {
  color: #7d7d7d;
  padding: 20px 0 14px 0;
  border-bottom: 1px solid var(--border-color);
  font-size: 1rem;
}
#topics > .post > .postTitle {
  margin: 0;
  padding: 0;
}
#cb_post_title_url {
  font-size: 24px;
  font-weight: 500;
  padding: 10px 0 !important;
}
#cnblogs_post_body {
  border-top: 1px solid var(--border-color);
}
.cnblogs-markdown {
  padding-top: 16px;
  letter-spacing: 1px;
  font-size: 16px;
  line-height: 1.5;
  word-wrap: break-word;
}
.cnblogs-markdown a {
  color: var(--a-color);
}
.cnblogs-markdown a:hover {
  text-decoration: underline;
}
.cnblogs-markdown p,
.cnblogs-markdown blockquote,
.cnblogs-markdown ul,
.cnblogs-markdown ol,
.cnblogs-markdown dl,
.cnblogs-markdown table,
.cnblogs-markdown pre,
.cnblogs-markdown details {
  margin-top: 0 !important;
  margin-bottom: 16px !important;
}
.cnblogs-markdown hr {
  height: 0.25em;
  padding: 0;
  margin: 24px 0 !important;
  background-color: var(--color-border-default);
  border: 0 !important;
}
.cnblogs-markdown blockquote {
  padding: 0 1em !important;
  border-left: 0.25em solid var(--border-color);
  color: inherit;
}
.cnblogs-markdown blockquote > :first-child {
  margin-top: 0;
}
.cnblogs-markdown blockquote > :last-child {
  margin-bottom: 0;
}
.cnblogs-markdown h1,
.cnblogs-markdown h2,
.cnblogs-markdown h3,
.cnblogs-markdown h4,
.cnblogs-markdown h5,
.cnblogs-markdown h6 {
  margin-top: 24px !important;
  margin-bottom: 16px !important;
  font-weight: 600 !important;
  line-height: 1.25 !important;
}
.cnblogs-markdown h1 tt,
.cnblogs-markdown h1 code,
.cnblogs-markdown h2 tt,
.cnblogs-markdown h2 code,
.cnblogs-markdown h3 tt,
.cnblogs-markdown h3 code,
.cnblogs-markdown h4 tt,
.cnblogs-markdown h4 code,
.cnblogs-markdown h5 tt,
.cnblogs-markdown h5 code,
.cnblogs-markdown h6 tt,
.cnblogs-markdown h6 code {
  padding: 0 0.2em;
  font-size: inherit;
}
.cnblogs-markdown h1 {
  padding-bottom: 0.3em;
  font-size: 2em;
  border-bottom: 1px solid var(--border-color);
}
.cnblogs-markdown h2 {
  padding-bottom: 0.3em;
  font-size: 1.5em !important;
  border-bottom: 1px solid var(--border-color);
}
.cnblogs-markdown h3 {
  font-size: 1.25em;
}
.cnblogs-markdown h4 {
  font-size: 1em;
}
.cnblogs-markdown h5 {
  font-size: 0.875em;
}
.cnblogs-markdown h6 {
  font-size: 0.85em;
}
.cnblogs-markdown .hs-item a {
  display: none;
}
.cnblogs-markdown .hs-item:hover a {
  display: initial;
  color: var(--a-color);
  text-decoration: none;
}
.cnblogs-markdown .hs-item button {
  display: none;
}
.cnblogs-markdown summary h1,
.cnblogs-markdown summary h2,
.cnblogs-markdown summary h3,
.cnblogs-markdown summary h4,
.cnblogs-markdown summary h5,
.cnblogs-markdown summary h6 {
  display: inline-block;
}
.cnblogs-markdown summary h1 .anchor,
.cnblogs-markdown summary h2 .anchor,
.cnblogs-markdown summary h3 .anchor,
.cnblogs-markdown summary h4 .anchor,
.cnblogs-markdown summary h5 .anchor,
.cnblogs-markdown summary h6 .anchor {
  margin-left: -40px;
}
.cnblogs-markdown summary h1,
.cnblogs-markdown summary h2 {
  padding-bottom: 0;
  border-bottom: 0;
}
.cnblogs-markdown ul,
.cnblogs-markdown ol {
  padding-left: 2em;
}
.cnblogs-markdown ul.no-list,
.cnblogs-markdown ol.no-list {
  padding: 0;
  list-style-type: none;
}
.cnblogs-markdown ol[type="1"] {
  list-style-type: decimal;
}
.cnblogs-markdown ol[type="a"] {
  list-style-type: lower-alpha;
}
.cnblogs-markdown ol[type="i"] {
  list-style-type: lower-roman;
}
.cnblogs-markdown div > ol:not([type]) {
  list-style-type: decimal;
}
.cnblogs-markdown ul ul,
.cnblogs-markdown ul ol,
.cnblogs-markdown ol ol,
.cnblogs-markdown ol ul {
  margin-top: 0;
  margin-bottom: 0;
}
.cnblogs-markdown li > p {
  margin-top: 16px;
}
.cnblogs-markdown li + li {
  margin-top: 0.25em;
}
.cnblogs-markdown dl {
  padding: 0;
}
.cnblogs-markdown dl dt {
  padding: 0;
  margin-top: 16px;
  font-size: 1em;
  font-style: italic;
  font-weight: 600;
}
.cnblogs-markdown dl dd {
  padding: 0 16px;
  margin-bottom: 16px;
}
.cnblogs-markdown table {
  display: block;
  width: 100%;
  width: max-content;
  max-width: 100%;
  overflow: auto;
  border-color: var(--border-color) !important;
}
.cnblogs-markdown table th {
  font-weight: 600;
  background: var(--input-bg) !important;
}
.cnblogs-markdown th,
.cnblogs-markdown td {
  border-color: var(--border-color) !important;
}
.cnblogs-markdown table img {
  background-color: transparent;
}
.cnblogs-markdown img {
  max-width: 100%;
  box-sizing: content-box;
}
.cnblogs-markdown .emoji {
  max-width: none;
  vertical-align: text-top;
  background-color: transparent;
}
.cnblogs-markdown :not(pre, div, td) > code,
.blogpost-body :not(pre, div, td) > code {
  background: 0;
  font-family: inherit;
  font-size: 1em;
  padding: 0;
}
.cnblogs-markdown code br,
.cnblogs-markdown tt br {
  display: none;
}
.cnblogs-markdown del code {
  text-decoration: inherit;
}
.cnblogs-markdown samp {
  font-size: 85%;
}
.cnblogs-markdown pre {
  position: relative;
  padding: 25px 0 !important;
  word-wrap: normal;
  border-radius: 4px;
}
.cnblogs-markdown pre > .btns-pre {
  position: absolute;
  right: 2px;
  top: 2px;
  z-index: 999;
}
.cnblogs-markdown pre > .btns-pre button {
  font-size: 12px;
  color: #333;
}
.cnblogs-markdown pre > code {
  font-size: 14px;
  padding: 0 25px !important;
  max-height: 700px;
  overflow: auto;
  white-space: pre-wrap !important;
}
#blog-comments-placeholder > .feedback_area_title {
  border-bottom: 1px solid var(--border-color);
  padding: 20px 0 6px;
  font-size: 18px;
  font-weight: 600;
  font-style: italic;
}
#blog-comments-placeholder > .feedbackItem {
  border-bottom: 1px solid var(--border-color);
  padding: 12px 0 8px;
}
.feedbackItem > .feedbackListSubtitle > .feedbackManage {
  float: right;
}
.feedbackManage a {
  display: inline-block;
  color: var(--font-color);
  margin-left: 14px;
  border-bottom: 1px solid var(--theme);
  padding: 0 !important;
  line-height: 20px;
}
.feedbackListSubtitle > a {
  color: var(--a-color);
}
.feedbackListSubtitle > .layer {
  background: var(--theme);
  color: #fff;
  border-radius: 2px;
  padding: 2px 6px;
  font-size: 12px;
}
.feedbackListSubtitle > .comment_date {
  margin: 0 14px;
  font-size: 85%;
}
.feedbackListSubtitle > .feedbackCon {
  padding: 16px 0 0;
}
#sideBar {
  width: 296px;
  overflow-x: hidden;
}
#sideBarMain {
  position: fixed;
  max-width: 268px;
  top: 70px;
  z-index: 800;
  bottom: 4px;
  overflow-y: auto;
}
#sideBar a {
  color: inherit;
}
#sideBar a:hover {
  color: var(--a-color);
}
#sideBarMain.affix {
  top: 70px;
}
#sideBarMain > div {
  border-left: 1px solid var(--border-color);
  padding-left: 28px;
  padding-right: 28px;
}
#profile_block {
  margin: 0;
  padding: 0;
}
#sideBarMain .catListTitle {
  font-size: 14px;
  margin: 0;
  font-weight: 600;
  line-height: 32px;
}
#sideBarMain .catListTitle + * {
  margin: 0 0 6px;
}
#sideBarMain .div_my_zzk {
  display: flex;
}
#sideBarMain .input_my_zzk {
  flex: 1;
  min-width: 118px;
  width: auto;
}
#sidebar_toptags ul {
  display: flex;
  flex-wrap: wrap;
}
#sidebar_toptags li {
  margin: 0 8px 10px 0;
}
#sidebar_toptags li a {
  white-space: nowrap;
  display: block;
  font-size: 12px;
  background-color: var(--input-bg);
  padding: 2px 8px;
  border-radius: 4px;
}
#sidebar_toptags li a:hover {
  color: #fff;
  background-color: var(--theme);
}
#toc-container {
  margin: 10px 0;
  border-top: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
}
#toc-container > .toc-top {
  padding: 2px 0;
  display: flex;
  justify-content: space-between;
}
#toc ul {
  padding-left: 16px;
}
#toc li {
  line-height: 1.8;
}
#toc a {
  margin: 2px 0;
}
#toc .active > a {
  color: var(--a-color);
  border-bottom: 1px solid var(--a-color);
}
#toc .active-last > a {
  color: var(--a-color);
  border-bottom: 1px solid var(--a-color);
}
#footer {
  text-align: center;
  padding: 24px;
}
#page_end_html {
  max-width: var(--max-width);
  margin: 0 auto;
}
#blog-btns {
  position: fixed;
  z-index: 999;
  bottom: 60px;
  right: 56px;
  bottom: 70px;
}
#blog-btns span {
  display: block;
  margin-bottom: 10px;
  border-radius: 50%;
  font-weight: bold;
  background: var(--body-bg);
  box-shadow: var(--box-shadow);
  font-size: 18px;
  width: 36px;
  height: 36px;
  text-align: center;
  line-height: 36px;
  cursor: pointer;
}
#blog-btns .icon-arrow-up {
  display: none;
}
#blog-btns.affix .icon-arrow-up {
  display: block;
}
#blog-btns span:hover {
  color: #fff;
  background: var(--theme);
  transition: all 0.2s;
}
#blog-btns > .rotated {
  transform: rotate(90deg);
}

页首HTML

<link
  rel="stylesheet"
  href="https://at.alicdn.com/t/font_2872767_90rgncq7s0u.css"
/>
<header>
  <div>
    <div id="blog-nav">
      <a href="https://www.cnblogs.com/" target="_blank">博客园</a>
      <a href="https://www.cnblogs.com/actudou/">首页</a>
      <a
        id="blog_nav_rss"
        class="menu"
        href="javascript:void(0)"
        data-rss="https://www.cnblogs.com/ctudou/rss/"
        >订阅</a
      >
      <a href="https://msg.cnblogs.com/send/user_2008" target="_blank">联系</a>
      <a href="https://i.cnblogs.com/EditPosts.aspx?opt=1" target="_blank"
        >新随笔</a
      >
      <a href="https://i.cnblogs.com/" target="_blank">管理</a>
    </div>
  </div>
</header>

页脚HTML

<div id="blog-btns" data-spy="affix" data-offset-top="80">
  <div>
    <span class="iconfont icon-arrow-up"></span>
    <span class="iconfont icon-shouqi btn-sidebar"></span>
    <span class="iconfont icon-day btn-theme"></span>
  </div>
  <span class="btn-control rotated iconfont icon-ellipsis"></span>
</div>
<script src="https://files.cnblogs.com/files/blogs/372275/affix-scrollspy.min.js?t=1658853262"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/clipboard.js/2.0.8/clipboard.min.js"></script>

<!-- <script src="https://blog-static.cnblogs.com/files/blogs/372275/affix.min.js?t=1658852259"></script> -->

<!-- <script src="https://blog-static.cnblogs.com/files/blogs/712181/scrollspy.js"></script> -->

<script>
  $(document).ready(function () {
    $("#blog-btns .icon-arrow-up").on("click", function () {
      $("html,body").animate({ scrollTop: 0 });
    });
    var theme = localStorage.getItem("theme") || "day";
    var showSide = true;
    if (theme != "day") {
      $("html").addClass("html-night");
      $("#blog-btns .btn-theme").addClass("icon-night");
    }
    $("#blog-btns .btn-theme").on("click", function () {
      $(this).toggleClass("icon-night");
      theme = theme == "day" ? "night" : "day";
      $("html").toggleClass("html-night");
      localStorage.setItem("theme", theme);
    });

    $("#blog-btns>.btn-control").on("click", function () {
      $(this).toggleClass("rotated").siblings().slideToggle("fast");
    });
    $("#blog-btns .btn-sidebar").on("click", function () {
      $(this).toggleClass("icon-zhankai");
      $("#sideBarMain").css({ "max-width": showSide ? "0" : "276px" });

      $("#sideBar").animate({ width: showSide ? "0" : "296px", speed: "fast" });
      showSide = !showSide;
    });
    function createLi(el, index) {
      return $("<li></li>").html(
        $("<a></a>")
          .attr("href", "#" + el.textContent)
          .text(el.textContent)
      );
    }
    function createToc(selector) {
      var hs = $(selector);
      if (hs.length === 0) {
        return false;
      }
      var min = {
        value: hs[0].tagName[1],
        index: 0,
      };

      hs.each(function (index, el) {
        if (el.tagName[1] - min.value < 0) {
          min = {
            index: index,
            value: el.tagName[1],
          };
        }
      });
      var arr = [];
      var toc = $("<ul></ul>");

      var preLevel = ""; //父级序号
      var parentLi = ""; //父级li
      hs.each(function (index, el) {
        var li = createLi(el);

        var t = el.tagName[1];
        $(el).addClass("hs-item");
        if (
          t === min.value ||
          index === 0 ||
          (index < min.index && t === hs[0].tagName[1])
        ) {
          toc.append(li);
          arr = [];
          preLevel = "";
          parentLi = li;
        } else {
          var r = t - hs[index - 1].tagName[1];
          preLevel = arr[0].li.data("level");
          if (r === 0) {
            arr[0].li.after(li);
            preLevel = preLevel.slice(0, preLevel.lastIndexOf("."));
          } else if (r > 0) {
            arr[0].li.append($("<ul></ul>").append(li));
            parentLi = arr[0].li;
          } else {
            var item = arr.find(function (value) {
              return t > value.el.tagName[1];
            });
            item.li.children("ul").append(li);
            preLevel = item.li.data("level");
            parentLi = item.li;
          }
          preLevel += ".";
        }
        var span = $('<span class="li-level"></span>');
        li.data({
          level: preLevel + "" + (li.index() + 1),
        })
          .children("a")
          .prepend(span.text(li.data("level") + ". "));

        $(el)
          .attr("id", el.textContent)
          .prepend(span.clone())
          .append(
            $("<a>#</a>").attr({
              href: "#" + el.id,
            })
          );

        // if (parentLi.children("li").length >= 2) {
        //   var toggle = $('<button class="li-toggle">-</button>');
        //   parentLi.prepend(toggle);
        //   toggle.on("click", function () {
        //     if (toggle.text() == "-") {
        //       toggle.text("+").siblings("ul").slideUp("fast");
        //     } else {
        //       toggle.text("-").siblings("ul").slideDown("fast");
        //     }
        //   });
        // }

        arr.unshift({
          el: el,
          li: li,
        });
        // $(el).text(li.data('level')+hs[index].text())
      });
      return toc;
    }
    function addPreBtn() {
      var pres = $("#cnblogs_post_body pre");
      if (pres.length == 0) {
        return;
      }
      pres.each(function (index, el) {
        var foldBtn = $(
          '<button class="iconfont icon-arrow-down icon-arrow-right cnb-code-toolbar-item">折叠</button>'
        );
        var code = $(this).children("code");
        var copyBtn = $('<button class="btn-copy">复制</button>').attr(
          "data-clipboard-text",
          code.text()
        );

        $(el).prepend(
          $('<div class="btns-pre"></div>').append(foldBtn).append(copyBtn)
        );
        foldBtn.on("click", function () {
          $(this).toggleClass("icon-arrow-down");
          code.slideToggle("fast");
        });
        var c = new ClipboardJS(copyBtn[0]);
        c.on("success", function () {
          // copyBtn.removeClass("icon-copy").addClass("icon-check");
          copyBtn.text("已复制");
        });
        c.on("error", function () {
          copyBtn.text("复制失败");
        });
        $(this).mouseleave(function () {
          // copyBtn.text("").removeClass("icon-check").addClass("icon-copy");
          if (copyBtn.text() == "已复制") {
            copyBtn.text("复制");
          }
        });
      });
    }
    var postId = window.location.pathname.match(/\/p\/(\d+)\./) || null;
    if (postId !== null) {
      addPreBtn();
      var toc = createToc(
        "#cnblogs_post_body h2,#cnblogs_post_body h3,#cnblogs_post_body h4,#cnblogs_post_body h5,#cnblogs_post_body h6"
      );
      if (toc !== false) {
        toc.addClass("nav").attr("id", "toc");
        var container = $(
          '<div id="toc-container"><div  class="catListTitle toc-top"><div>目录</div><span class="iconfont icon-arrow-down icon-arrow-right"></span></div></div>'
        ).append(toc);
        $("#leftcontentcontainer").prepend(container);
        $("body").scrollspy({
          target: "#leftcontentcontainer",
          offset: 70,
        });
        var activeLast = $("<div></div>");
        // var hideActiveLast = $("<div></div>");

        $("#leftcontentcontainer").on("activate.bs.scrollspy", function () {
          // activeLast.removeClass("active-last");
          // hideActiveLast.removeClass("active-last");
          // activeLast = $("#leftcontentcontainer>#toc .active")
          //   .slice(-1)
          //   .addClass("active-last");
          // hideActiveLast = $("#leftcontentcontainer>.toc-hide .active")
          //   .slice(-1)
          //   .addClass("active-last");
        });
      }

      $("#toc-container>.toc-top").on("click", function () {
        $("#toc").slideToggle("fast");

        $("#toc-container>.toc-top span").toggleClass("icon-arrow-down");
      });
    }
  });
</script>

标签：markdown,cnblogs,自定义,color,js,--,var,font,css
来源： https://www.cnblogs.com/actudou/p/16535729.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。