我選擇的博客園的皮膚是
darkgreentrip
,
因爲要兼顧爲知筆記自動發佈的博客的樣式,就本身處理了一下博客的樣式,如果要引用個人樣式的話,將css中帶着wiz
的樣式刪掉就好,好比.wiz-editor-body
;
如果只是想要其中的目錄功能的話,只須要設置下方的頁首Html代碼便可javascript
h1,h2,h3,h4,h5,h6 { margin-top: 30px!important; background-color: black; color: white; padding-left: 10px; } .wiz-editor-body .wiz-code-container { position: relative; padding: 8px 0; margin: 5px 25px 5px 5px; text-indent: 0; text-align: left; } .CodeMirror { font-family: Consolas,DroidSans,"Liberation Mono", Menlo, Courier, monospace; color: black; font-size: 10.5pt; font-size: 0.875rem } .wiz-editor-body .wiz-code-container .CodeMirror div { margin-top: 0; margin-bottom: 0; } .CodeMirror-lines { padding: 4px 0; } .CodeMirror pre { padding: 0 4px; } .CodeMirror-scrollbar-filler, .CodeMirror-gutter-filler { background-color: white; } .CodeMirror-gutters { border-right: 1px solid #ddd; background-color: #f7f7f7; white-space: nowrap; } .CodeMirror-linenumbers { } .CodeMirror-linenumber { padding: 0 3px 0 5px; min-width: 20px; text-align: right; color: #999; white-space: nowrap; } .CodeMirror-guttermarker { color: black; } .CodeMirror-guttermarker-subtle { color: #999; } .CodeMirror-cursor { border-left: 1px solid black; border-right: none; width: 0; } .CodeMirror div.CodeMirror-secondarycursor { border-left: 1px solid silver; } .cm-fat-cursor .CodeMirror-cursor { width: auto; border: 0 !important; background: #7e7; } .cm-fat-cursor div.CodeMirror-cursors { z-index: 1; } .cm-animate-fat-cursor { width: auto; border: 0; -webkit-animation: blink 1.06s steps(1) infinite; -moz-animation: blink 1.06s steps(1) infinite; animation: blink 1.06s steps(1) infinite; background-color: #7e7; } @-moz-keyframes blink { 0% { } 50% { background-color: transparent; } 100% { } } @-webkit-keyframes blink { 0% { } 50% { background-color: transparent; } 100% { } } @keyframes blink { 0% { } 50% { background-color: transparent; } 100% { } } .CodeMirror-overwrite .CodeMirror-cursor { } .cm-tab { display: inline-block; text-decoration: inherit; } .CodeMirror-rulers { position: absolute; left: 0; right: 0; top: -50px; bottom: -20px; overflow: hidden; } .CodeMirror-ruler { border-left: 1px solid #ccc; top: 0; bottom: 0; position: absolute; } .cm-s-default .cm-header { color: blue; } .cm-s-default .cm-quote { color: #090; } .cm-negative { color: #d44; } .cm-positive { color: #292; } .cm-header, .cm-strong { font-weight: bold; } .cm-em { font-style: italic; } .cm-link { text-decoration: underline; } .cm-strikethrough { text-decoration: line-through; } .cm-s-default .cm-keyword { color: #708; } .cm-s-default .cm-atom { color: #219; } .cm-s-default .cm-number { color: #164; } .cm-s-default .cm-def { color: #00f; } .cm-s-default .cm-variable,.cm-s-default .cm-punctuation,.cm-s-default .cm-property,.cm-s-default .cm-operator { } .cm-s-default .cm-variable-2 { color: #05a; } .cm-s-default .cm-variable-3 { color: #085; } .cm-s-default .cm-comment { color: #a50; } .cm-s-default .cm-string { color: #a11; } .cm-s-default .cm-string-2 { color: #f50; } .cm-s-default .cm-meta { color: #555; } .cm-s-default .cm-qualifier { color: #555; } .cm-s-default .cm-builtin { color: #30a; } .cm-s-default .cm-bracket { color: #997; } .cm-s-default .cm-tag { color: #170; } .cm-s-default .cm-attribute { color: #00c; } .cm-s-default .cm-hr { color: #999; } .cm-s-default .cm-link { color: #00c; } .cm-s-default .cm-error { color: #f00; } .cm-invalidchar { color: #f00; } .CodeMirror-composing { border-bottom: 2px solid; } div.CodeMirror span.CodeMirror-matchingbracket { color: #0f0; } div.CodeMirror span.CodeMirror-nonmatchingbracket { color: #f22; } .CodeMirror-matchingtag { background: rgba(255, 150, 0, .3); } .CodeMirror-activeline-background { background: #e8f2ff; } .CodeMirror { position: relative; background: #f5f5f5; } .CodeMirror-scroll { overflow: hidden !important; margin-bottom: 0; margin-right: -30px; padding: 16px 30px 16px 0; outline: none; position: relative; } .CodeMirror-sizer { position: relative; border-right: 30px solid transparent; } .CodeMirror-vscrollbar, .CodeMirror-hscrollbar, .CodeMirror-scrollbar-filler, .CodeMirror-gutter-filler { position: absolute; z-index: 6; display: none; } .CodeMirror-vscrollbar { right: 0; top: 0; overflow-x: hidden; overflow-y: scroll; } .CodeMirror-hscrollbar { bottom: 0; left: 0 !important; overflow-y: hidden; overflow-x: scroll; } .CodeMirror-scrollbar-filler { right: 0; bottom: 0; } .CodeMirror-gutter-filler { left: 0; bottom: 0; } .CodeMirror-gutters { position: absolute; left: 0; top: -5px; min-height: 100%; z-index: 3; } .CodeMirror-gutter { white-space: normal; height: inherit; display: inline-block; vertical-align: top; margin-bottom: -30px; } .CodeMirror-gutter-wrapper { position: absolute; z-index: 4; background: none !important; border: none !important; } .CodeMirror-gutter-background { position: absolute; top: 0; bottom: 0; z-index: 4; } .CodeMirror-gutter-elt { position: absolute; cursor: default; z-index: 4; text-align: center; } .CodeMirror-gutter-wrapper ::selection { background-color: transparent } .CodeMirror-gutter-wrapper ::-moz-selection { background-color: transparent } .CodeMirror-lines { cursor: text; min-height: 1px; } .CodeMirror pre { -moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0; border-width: 0; background: transparent; font-family: inherit; font-size: inherit; margin: 0; white-space: pre; word-wrap: normal; line-height: inherit; color: inherit; z-index: 2; position: relative; overflow: visible; -webkit-tap-highlight-color: transparent; -webkit-font-variant-ligatures: contextual; font-variant-ligatures: contextual; } .CodeMirror-wrap pre { word-wrap: break-word; white-space: pre-wrap; word-break: normal; } .CodeMirror-linebackground { position: absolute; left: 0; right: 0; top: 0; bottom: 0; z-index: 0; } .CodeMirror-linewidget { position: relative; z-index: 2; overflow: auto; } .CodeMirror-widget { } .CodeMirror-rtl pre { direction: rtl; } .CodeMirror-code { outline: none; } .CodeMirror-scroll,.CodeMirror-sizer,.CodeMirror-gutter,.CodeMirror-gutters,.CodeMirror-linenumber { -moz-box-sizing: content-box; box-sizing: content-box; } .CodeMirror-measure { position: absolute; width: 100%; height: 0; overflow: hidden; visibility: hidden; } .CodeMirror-cursor { position: absolute; pointer-events: none; } .CodeMirror-measure pre { position: static; } div.CodeMirror-cursors { visibility: hidden; position: relative; z-index: 3; } div.CodeMirror-dragcursors { visibility: visible; } .CodeMirror-focused div.CodeMirror-cursors { visibility: visible; } .CodeMirror-selected { background: #d9d9d9; } .CodeMirror-focused .CodeMirror-selected { background: #d7d4f0; } .CodeMirror-crosshair { cursor: crosshair; } .CodeMirror-line::selection, .CodeMirror-line > span::selection, .CodeMirror-line > span > span::selection { background: #d7d4f0; } .CodeMirror-line::-moz-selection, .CodeMirror-line > span::-moz-selection, .CodeMirror-line > span > span::-moz-selection { background: #d7d4f0; } .cm-searching { background: #ffa; background: rgba(255, 255, 0, .4); } .cm-force-border { padding-right: .1px; } @media print { .CodeMirror div.CodeMirror-cursors { visibility: hidden; } } .cm-tab-wrap-hack:after { content: ""; } span.CodeMirror-selectedtext { background: none; } .CodeMirror-activeline-background, .CodeMirror-selected { transition: visibility 0ms 100ms; } .CodeMirror-blur .CodeMirror-activeline-background, .CodeMirror-blur .CodeMirror-selected { visibility: hidden; } .CodeMirror-blur .CodeMirror-matchingbracket { color: inherit !important; outline: none !important; text-decoration: none !important; } .CodeMirror-sizer { min-height: auto !important; } .cm-s-eclipse span.cm-meta { color: #FF1717; } .cm-s-eclipse span.cm-keyword { line-height: 1em; font-weight: bold; color: #7F0055; } .cm-s-eclipse span.cm-atom { color: #219; } .cm-s-eclipse span.cm-number { color: #164; } .cm-s-eclipse span.cm-def { color: #00f; } .cm-s-eclipse span.cm-variable { color: black; } .cm-s-eclipse span.cm-variable-2 { color: #0000C0; } .cm-s-eclipse span.cm-variable-3 { color: #0000C0; } .cm-s-eclipse span.cm-property { color: black; } .cm-s-eclipse span.cm-operator { color: black; } .cm-s-eclipse span.cm-comment { color: #3F7F5F; } .cm-s-eclipse span.cm-string { color: #2A00FF; } .cm-s-eclipse span.cm-string-2 { color: #f50; } .cm-s-eclipse span.cm-qualifier { color: #555; } .cm-s-eclipse span.cm-builtin { color: #30a; } .cm-s-eclipse span.cm-bracket { color: #cc7; } .cm-s-eclipse span.cm-tag { color: #170; } .cm-s-eclipse span.cm-attribute { color: #00c; } .cm-s-eclipse span.cm-link { color: #219; } .cm-s-eclipse span.cm-error { color: #f00; } .cm-s-eclipse .CodeMirror-activeline-background { background: #e8f2ff; } .cm-s-eclipse .CodeMirror-matchingbracket { outline: 1px solid grey; color: black !important; } html, .wiz-editor-body { font-size: 12pt; } .wiz-editor-body { font-family: Helvetica,'Hiragino Sans GB', '微軟雅黑', 'Microsoft YaHei UI', SimSun, SimHei, arial, sans-serif; line-height: 1.7; margin: 0 auto; padding: 20px 16px; padding: 1.25rem 1rem; } .wiz-editor-body h1,.wiz-editor-body h2,.wiz-editor-body h3,.wiz-editor-body h4,.wiz-editor-body h5,.wiz-editor-body h6 { margin: 20px 0 10px; margin: 1.25rem 0 0.625rem; padding: 0; font-weight: bold; } .wiz-editor-body h1 { font-size: 20pt; font-size: 1.67rem; } .wiz-editor-body h2 { font-size: 18pt; font-size: 1.5rem; } .wiz-editor-body h3 { font-size: 15pt; font-size: 1.25rem; } .wiz-editor-body h4 { font-size: 14pt; font-size: 1.17rem; } .wiz-editor-body h5 { font-size: 12pt; font-size: 1rem; } .wiz-editor-body h6 { font-size: 12pt; font-size: 1rem; color: #777777; margin: 1rem 0; } .wiz-editor-body div,.wiz-editor-body p,.wiz-editor-body ul,.wiz-editor-body ol,.wiz-editor-body dl,.wiz-editor-body li { margin: 8px 0; } .wiz-editor-body blockquote,.wiz-editor-body table,.wiz-editor-body pre,.wiz-editor-body code { margin: 8px 0; } .wiz-editor-body .CodeMirror pre { margin: 0; } .wiz-editor-body ul,.wiz-editor-body ol { padding-left: 32px; padding-left: 2rem; } .wiz-editor-body ol.wiz-list-level1 > li { list-style-type: decimal; } .wiz-editor-body ol.wiz-list-level2 > li { list-style-type: lower-latin; } .wiz-editor-body ol.wiz-list-level3 > li { list-style-type: lower-roman; } .wiz-editor-body blockquote { padding: 0 12px; } .wiz-editor-body blockquote > :first-child { margin-top: 0; } .wiz-editor-body blockquote > :last-child { margin-bottom: 0; } .wiz-editor-body img { border: 0; max-width: 100%; height: auto !important; margin: 2px 0; } .wiz-editor-body table { border-collapse: collapse; border: 1px solid #bbbbbb; } .wiz-editor-body td,.wiz-editor-body th { padding: 4px 8px; border-collapse: collapse; border: 1px solid #bbbbbb; min-height: 28px; word-break: break-word; box-sizing: border-box; } .wiz-hide { display: none !important; } .hljs { display: block; padding: 0.5em; background: #f5f5f5!important; } .hljs, .hljs-subst, .hljs-tag .hljs-title, .lisp .hljs-title, .clojure .hljs-built_in, .nginx .hljs-title { color: black; } .hljs-string, .hljs-title, .hljs-constant, .hljs-parent, .hljs-tag .hljs-value, .hljs-rules .hljs-value, .hljs-rules .hljs-value .hljs-number, .hljs-preprocessor, .hljs-pragma, .haml .hljs-symbol, .ruby .hljs-symbol, .ruby .hljs-symbol .hljs-string, .hljs-aggregate, .hljs-template_tag, .django .hljs-variable, .smalltalk .hljs-class, .hljs-addition, .hljs-flow, .hljs-stream, .bash .hljs-variable, .apache .hljs-tag, .apache .hljs-cbracket, .tex .hljs-command, .tex .hljs-special, .erlang_repl .hljs-function_or_atom, .asciidoc .hljs-header, .markdown .hljs-header, .coffeescript .hljs-attribute { color: #800; } .smartquote, .hljs-comment, .hljs-annotation, .hljs-template_comment, .diff .hljs-header, .hljs-chunk, .asciidoc .hljs-blockquote, .markdown .hljs-blockquote { color: #888; } .hljs-number, .hljs-date, .hljs-regexp, .hljs-literal, .hljs-hexcolor, .smalltalk .hljs-symbol, .smalltalk .hljs-char, .go .hljs-constant, .hljs-change, .lasso .hljs-variable, .makefile .hljs-variable, .asciidoc .hljs-bullet, .markdown .hljs-bullet, .asciidoc .hljs-link_url, .markdown .hljs-link_url { color: #080; } .hljs-label, .hljs-javadoc, .ruby .hljs-string, .hljs-decorator, .hljs-filter .hljs-argument, .hljs-localvars, .hljs-array, .hljs-attr_selector, .hljs-important, .hljs-pseudo, .hljs-pi, .haml .hljs-bullet, .hljs-doctype, .hljs-deletion, .hljs-envvar, .hljs-shebang, .apache .hljs-sqbracket, .nginx .hljs-built_in, .tex .hljs-formula, .erlang_repl .hljs-reserved, .hljs-prompt, .asciidoc .hljs-link_label, .markdown .hljs-link_label, .vhdl .hljs-attribute, .clojure .hljs-attribute, .asciidoc .hljs-attribute, .lasso .hljs-attribute, .coffeescript .hljs-property, .hljs-phony { color: #88F } .hljs-keyword, .hljs-id, .hljs-title, .hljs-built_in, .hljs-aggregate, .css .hljs-tag, .hljs-javadoctag, .hljs-phpdoc, .hljs-yardoctag, .smalltalk .hljs-class, .hljs-winutils, .bash .hljs-variable, .apache .hljs-tag, .go .hljs-typename, .tex .hljs-command, .asciidoc .hljs-strong, .markdown .hljs-strong, .hljs-request, .hljs-status { font-weight: bold; } .asciidoc .hljs-emphasis, .markdown .hljs-emphasis { font-style: italic; } .nginx .hljs-built_in { font-weight: normal; } .coffeescript .javascript, .javascript .xml, .lasso .markup, .tex .hljs-formula, .xml .javascript, .xml .vbscript, .xml .css, .xml .hljs-cdata { opacity: 0.5; } code { font-family: Consolas,DroidSans, "Liberation Mono", Menlo, Courier, monospace!important; word-wrap: break-word; color: brown; background-color: #f9f2f4!important; padding-left:10px; } .pln { color: #48484C; } .str { color: #DD1144; } .kwd { color: #1E347B; } .com { color: #93A1A1; } .typ { color: teal; } .lit { color: #195F91; } .pun { color: #93A1A1; } .opn { color: #93A1A1; } .clo { color: #93A1A1; } .tag { color: #008; } .atn { color: teal; } .atv { color: #DD1144; } .dec { color: teal; } .var { color: teal; } .fun { color: #DC322F; } #cnblogs_post_body ol{ } /* Put a border around prettyprinted code snippets. */ pre.prettyprint { background-color: #f5f5f5; margin: 10px 0; padding: 10px 0; } pre.prettyprint.linenums { overflow: auto; -webkit-overflow-scrolling: touch; } pre.prettyprint.linenums ol.linenums li { /* color: #BEBEC5; line-height: 18px; */ } /*生成博客目錄的CSS*/ #uprightsideBar{ font-size:12px; font-family:Arial, Helvetica, sans-serif; text-align:left; position:fixed;/*將div的位置固定到距離top:50px,right:0px的位置,這樣div就會處在最右邊的位置,距離頂部50px*/ top:50px; right:0px; width: auto; height: auto; } #sideBarTab{ float:left; width:30px; border:1px solid #e5e5e5; border-right:none; text-align:center; background:#ffffff; } #sideBarContents{ float:left; overflow:auto; overflow-x:hidden;!important; width:300px; min-height:108px; max-height:460px; border:1px solid #e5e5e5; border-right:none; background:#ffffff; } #sideBarContents dl{ margin:0; padding:0; } #sideBarContents dt{ margin-top:5px; margin-left:5px; } #sideBarContents dd, dt { cursor: pointer; } #sideBarContents dd:hover, dt:hover { color:#A7995A; } #sideBarContents dd{ margin-left:20px; } .blogpost-body pre code{ height: 1px; overflow: hidden; } .blogpost-body pre .hljs{ height: auto; background-color: #f5f5f5 !important; } .cnblogs_code pre { overflow: auto; height: auto; } a.wiz_toc.h3 { margin-left: 20px; } a.wiz_toc.h4 { margin-left: 30px; } a.wiz_toc.h5 { margin-left:40px; } .postBody blockquote{ color: #555; border-left: 2px solid #009A61; background: aliceblue; } .CodeMirror-scroll{ display:none } ol.linenums code{ border:0px!important; font-size: 14px!important; margin: 0px; } .cnblogs-markdown .hljs, .cnblogs-post-body .hljs,.cnblogs-markdown code, .cnblogs-post-body code,ol.linenums code,.wiz_toc_layer{ font-family:Consolas,DroidSans,"Liberation Mono", Menlo, Courier, monospace!important } /*md目錄*/ .wiz_toc_layer{ background-color: #f5f5f5; padding-left: 10px; margin-bottom: 30px; } .postBody li, .postCon li{ margin-bottom: 0; } #cnblogs_post_body .linenums ol li { list-style-type: none; } #cnblogs_post_body ul ul li{ list-style-type: decimal; } pre { border :0!important; } #cnblogs_post_body .linenums ol { padding-left: 5px; } #sideCatalog-catalog{ overflow: auto!important; font-family: Consolas,DroidSans,"Liberation Mono", Menlo, Courier, monospace; } #sideCatalog-catalog::-webkit-scrollbar { display: none; } blockquote{ border:0; } .cnblogs-markdown code, .cnblogs-post-body code{ border: 0!important; background-color: #f9f2f4!important; } .cnblogs-markdown .hljs, .cnblogs-post-body .hljs{ font-size: 14px !important; } #blogTitle{ height: auto; text-align: center; } #blogTitle h1, #blogTitle h2 { border: 0; background: none; } a:hover { text-decoration: none; /* color: #390!important ; */ color : cornflowerblue; } #blogTitle h1 { font-size: 70px; color: black; line-height: 0.5; margin: 20px 0px; } /*關閉下方的博客園推薦*/ #ad_t2,#under_post_news{ display: none; } /*將評論框放到最大*/ div.commentform textarea.comment_textarea,.commentbox_title{ width: -webkit-fill-available; } .commentbox_title_right{ float: left; } #commentform_title { font: normal normal 16px/35px "Microsoft YaHei"; margin: 10px 0 30px; border-bottom: 2px solid #ccc; background-image: none; padding: 0; } .feedback_area_title, #commentform_title { font-size: 25px; } #comment_form_container p { font-size: 14px; margin-bottom: 20px; } #topics, #blog-comments-placeholder,#comment_form { min-height: 200px; margin-bottom: 15px; padding: 15px; -o-text-overflow: ellipsis; text-overflow: ellipsis; overflow: hidden; word-break: break-all; background: #fff; border-radius: 7px; box-shadow: 1px 1px 2px #a7a8ad; } #blog-comments-placeholder{ min-height: 0px; } #comment_nav a { position: relative; top: 105px; font-size: 14px; } #post_detail .postTitle a{ color: black; transition: all .4s linear 0s; font-size: 45px; margin-top: 15px; margin-bottom: 20px; font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC", "Microsoft YaHei", "Source Han Sans SC", "Noto Sans CJK SC", "WenQuanYi Micro Hei", sans-serif; font-weight: normal; } .feedback_area_title,#topics .postTitle{ font-weight: inherit; text-align: center; background-color: white; } #post-date,.author_profile_info{ display: none; } .newsItem, #blog-calendar{ padding: 0; } #sidebar_news #blog-news{ padding: 0 13px; } .newsItem .catListTitle{ display: block; margin-top: 0!important; padding-top: 0; } .catListEssay, .catListLink, .catListNoteBook, .catListTag, .catListPostCategory, .catListPostArchive, .catListImageCategory, .catListArticleArchive, .catListView, .catListFeedback, .mySearch, .catListComment, .catListBlogRank, .catList, .catListArticleCategory{ overflow: inherit; } #sidebar_search_box{ padding: 5px 0; } #profile_block{ margin: 5px; } .catListTitle{ background: black; } a#Header1_HeaderTitle { color: black; } .recent_comment_body{ font-size: small; } .forFlow .postTitle a { color: black; } #myposts { margin-left: 20px; background-color: white; margin: 10px; padding: 10px; border-radius: 7px; } .postBody h4,.postBody h5,.postBody h3{ color: white; }
<script src="http://cdn.bootcss.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> <link href="http://files.cnblogs.com/files/mingjiatang/mystyle.css" rel="stylesheet"> <script type="text/javascript" src="http://files.cnblogs.com/files/mingjiatang/mycnblogs.js"></script> <script type="text/javascript" src="http://files.cnblogs.com/files/mingjiatang/mystyle.js"></script> <script> var u = $(this), v = u[0]; var title=u.text(); var text=u.text(); u.attr('id', 'autoid-' + l + '-' + m + '-' + n) if (v.localName === 'h2') { l++; m = 0; if(text.length>30) text=text.substr(0,30)+"..."; j += '<li><a href="#' + u.attr('id') + '" title="' + title + '">' + text + '</a><span class="sideCatalog-dot"></span></li>'; } else if (v.localName === 'h3') { m++; n = 0; if(q){ if(text.length>28) text=text.substr(0,28)+"..."; j += '<li class="h2Offset"><a href="#' + u.attr('id') + '" title="' + title + '">' + text + '</a><span class="sideCatalog-dot"></span></li>'; } }else if (v.localName === 'h4') { n++; if(r){ j += '<li class="h3Offset"><a href="#' + u.attr('id') + '" title="' + title + '">' + u.text() + '</a></li>'; } } </script>