switch hljs to prismjs for syntax highlighting

abowloflrf · May 13, 2018 · f3e2f9b · f3e2f9b
1 parent 0c6858d
commit f3e2f9b
Show file tree

Hide file tree

Showing 13 changed files with 603 additions and 86 deletions.
diff --git a/assets/build/app.css b/assets/build/app.css
@@ -0,0 +1,265 @@
+@charset "UTF-8";
+body {
+  margin: 0;
+  color: rgba(0, 0, 0, 0.8);
+  font-family: "Merriweather", Georgia, "Source Han Sans CN", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif;
+  font-size: 14px; }
+
+code {
+  font-family: "Fira Code", Monaco, Consolas, "Ubuntu Mono", monospace; }
+
+a {
+  text-decoration: none;
+  color: #374355; }
+
+/* 正文如下 */
+.navbar {
+  background: #fff;
+  box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.075); }
+
+.navbar .nav-logo {
+  height: 40px; }
+
+.container {
+  margin: 0 auto;
+  padding: 0px 40px;
+  max-width: 900px;
+  min-width: 200px; }
+
+.navbar-brand {
+  display: flex;
+  flex-shrink: 0; }
+
+.navbar-burger {
+  cursor: pointer;
+  display: block;
+  height: 60px;
+  position: relative;
+  width: 60px;
+  margin-left: auto; }
+
+.navbar-burger span {
+  background-color: #374355;
+  display: block;
+  height: 1px;
+  left: calc(50% - 8px);
+  position: absolute;
+  transform-origin: center;
+  transition-duration: 86ms;
+  transition-property: background-color, opacity, transform, -webkit-transform;
+  transition-timing-function: ease-out;
+  width: 16px; }
+
+.navbar-burger span:nth-child(1) {
+  top: calc(50% - 6px); }
+
+.navbar-burger span:nth-child(2) {
+  top: calc(50% - 1px); }
+
+.navbar-burger span:nth-child(3) {
+  top: calc(50% + 4px); }
+
+.navbar-burger:hover {
+  background-color: rgba(0, 0, 0, 0.05); }
+
+.navbar-burger.is-active span:nth-child(1) {
+  -webkit-transform: translateY(5px) rotate(45deg);
+  transform: translateY(5px) rotate(45deg); }
+
+.navbar-burger.is-active span:nth-child(2) {
+  opacity: 0; }
+
+.navbar-burger.is-active span:nth-child(3) {
+  -webkit-transform: translateY(-5px) rotate(-45deg);
+  transform: translateY(-5px) rotate(-45deg); }
+
+.navbar-item {
+  font-size: 16px;
+  flex-grow: 0;
+  flex-shrink: 0;
+  position: relative;
+  padding: 0.5rem 1rem;
+  line-height: 40px;
+  text-transform: uppercase;
+  display: block; }
+
+.navbar-menu {
+  display: none; }
+
+.footer-hr {
+  margin: 50px 0px 10px 0px;
+  border: none;
+  height: 2px;
+  border-top: 1px solid #c9d3df; }
+
+footer p {
+  font-size: 14px;
+  color: #9eabb3;
+  text-align: center; }
+
+@media screen and (max-width: 600px) {
+  .container,
+  footer {
+    padding: 0 20px; }
+  .navbar .nav-logo {
+    height: 24px; }
+  .navbar-burger {
+    height: 40px;
+    width: 40px; }
+  .navbar-menu.is-active {
+    display: block; }
+  .navbar-menu {
+    background-color: white;
+    padding: 0.5rem 0; }
+  .navbar-item {
+    font-size: 14px;
+    line-height: 20px; }
+  .navbar-brand .navbar-item {
+    display: flex; } }
+
+@media screen and (min-width: 600px) {
+  .navbar {
+    display: flex; }
+  .navbar-burger {
+    display: none; }
+  .navbar-menu {
+    display: flex;
+    flex-grow: 1;
+    flex-shrink: 0; }
+  .navbar-item {
+    align-items: center;
+    display: flex; } }
+/**
+ * prism.js tomorrow night eighties for JavaScript, CoffeeScript, CSS and HTML
+ * Based on https://github.com/chriskempson/tomorrow-theme
+ * @author Rose Pritchard
+ */
+code[class*="language-"],
+pre[class*="language-"] {
+  color: #ccc;
+  background: none;
+  font-family: "Fira Code", Monaco, Consolas, "Ubuntu Mono", monospace;
+  text-align: left;
+  white-space: pre;
+  word-spacing: normal;
+  word-break: normal;
+  word-wrap: normal;
+  -moz-tab-size: 4;
+  -o-tab-size: 4;
+  tab-size: 4;
+  -webkit-hyphens: none;
+  -moz-hyphens: none;
+  -ms-hyphens: none;
+  hyphens: none; }
+
+/* Code blocks */
+pre[class*="language-"] {
+  padding: 1em;
+  margin: .5em 0;
+  overflow: auto; }
+
+:not(pre) > code[class*="language-"],
+pre[class*="language-"] {
+  background: #2d2d2d; }
+
+/* Inline code */
+:not(pre) > code[class*="language-"] {
+  padding: .1em;
+  border-radius: .3em;
+  white-space: normal; }
+
+.token.comment,
+.token.block-comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+  color: #999; }
+
+.token.punctuation {
+  color: #ccc; }
+
+.token.tag,
+.token.attr-name,
+.token.namespace,
+.token.deleted {
+  color: #e2777a; }
+
+.token.function-name {
+  color: #6196cc; }
+
+.token.boolean,
+.token.number,
+.token.function {
+  color: #f08d49; }
+
+.token.property,
+.token.class-name,
+.token.constant,
+.token.symbol {
+  color: #f8c555; }
+
+.token.selector,
+.token.important,
+.token.atrule,
+.token.keyword,
+.token.builtin {
+  color: #cc99cd; }
+
+.token.string,
+.token.char,
+.token.attr-value,
+.token.regex,
+.token.variable {
+  color: #7ec699; }
+
+.token.operator,
+.token.entity,
+.token.url {
+  color: #67cdcc; }
+
+.token.important,
+.token.bold {
+  font-weight: bold; }
+
+.token.italic {
+  font-style: italic; }
+
+.token.entity {
+  cursor: help; }
+
+.token.inserted {
+  color: green; }
+pre.line-numbers {
+  position: relative;
+  padding-left: 5em;
+  counter-reset: linenumber; }
+
+pre.line-numbers > code {
+  position: relative;
+  white-space: inherit; }
+
+.line-numbers .line-numbers-rows {
+  position: absolute;
+  pointer-events: none;
+  top: 0;
+  left: -4.5em;
+  width: 3em;
+  /* works for line-numbers below 1000 lines */
+  letter-spacing: -1px;
+  border-right: 1px solid #999;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none; }
+
+.line-numbers-rows > span {
+  pointer-events: none;
+  display: block;
+  counter-increment: linenumber; }
+
+.line-numbers-rows > span:before {
+  content: counter(linenumber);
+  color: #999;
+  display: block;
+  padding-right: 1.2em;
+  text-align: right; }

diff --git a/assets/build/app.js b/assets/build/app.js
diff --git a/assets/css/global.css b/assets/css/global.css
@@ -7,7 +7,6 @@ body {
 }
 code {
     font-family: "Fira Code", Monaco, Consolas, "Ubuntu Mono", monospace;
-    font-size: 13px;
 }
 a {
     text-decoration: none;

diff --git a/assets/css/post.css b/assets/css/post.css
@@ -85,7 +85,7 @@ table tbody + tbody {
     font-weight: 200;
 }
 .post-container {
-    padding: 40px;
+    padding: 1.5rem;
 }
 .post-title {
     font-size: 36px;
@@ -144,6 +144,7 @@ table tbody + tbody {
 .post-content li {
     line-height: 1.8rem;
 }
+
 .post-content :not(pre) > code {
     background: #f0f2f1;
     color: #07a;
@@ -154,14 +155,13 @@ table tbody + tbody {
     text-shadow: 0 1px #fff;
     box-shadow: 0 1px 1px rgba(0, 0, 0, 0.125);
 }
-.post-content pre > code::-webkit-scrollbar {
-    display: none;
-}
-.post-content pre > code {
-    border: none;
-    background: rgba(238, 238, 238, 0.35);
-    padding: 8px 10px;
-    line-height: 2;
+.post-content pre {
+    color: #ccc;
+    margin: 1rem -1.5rem;
+    line-height: 1.8;
+    background-color: #282c34;
+    padding-top: 1.25rem;
+    padding-bottom: 1.25rem;
 }
 
 .post-content blockquote {
@@ -177,7 +177,7 @@ table tbody + tbody {
 .post-content blockquote p {
     margin: 0;
 }
-.post-content iframe{
+.post-content iframe {
     max-width: 100%;
 }
 #comment {
@@ -239,14 +239,26 @@ img.zoom-img {
 /* End of Zoom.js CSS file */
 
 @media (max-width: 600px) {
+    .container {
+        padding: 0;
+    }
+    article {
+        border-radius: 0;
+    }
     .post-hr {
         margin: 20px;
     }
     .post-content hr {
         margin: 20px;
     }
-    .post-container {
-        padding: 15px;
+    .post-content pre {
+        font-size: 12px;
+        line-height: 1.4;
+        padding-top: 0.8rem;
+        padding-bottom: 0.8rem;
+    }
+    .post-content pre::-webkit-scrollbar {
+        display: none;
     }
     .post-image {
         max-height: 200px;
@@ -273,5 +285,6 @@ img.zoom-img {
     }
     #comment {
         padding: 15px;
+        border-radius: 0;
     }
 }
diff --git a/assets/css/prism-line-numbers.css b/assets/css/prism-line-numbers.css
@@ -0,0 +1,39 @@
+pre.line-numbers {
+    position: relative;
+    padding-left: 5em;
+    counter-reset: linenumber;
+}
+
+pre.line-numbers > code {
+    position: relative;
+    white-space: inherit;
+}
+
+.line-numbers .line-numbers-rows {
+    position: absolute;
+    pointer-events: none;
+    top: 0;
+    left: -4.5em;
+    width: 3em; /* works for line-numbers below 1000 lines */
+    letter-spacing: -1px;
+    border-right: 1px solid #999;
+
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+}
+
+.line-numbers-rows > span {
+    pointer-events: none;
+    display: block;
+    counter-increment: linenumber;
+}
+
+.line-numbers-rows > span:before {
+    content: counter(linenumber);
+    color: #999;
+    display: block;
+    padding-right: 1.2em;
+    text-align: right;
+}