From 4d64a16b480803646040da49bf01fcdd7e8f2a88 Mon Sep 17 00:00:00 2001 From: Benjy Cui Date: Fri, 22 Apr 2016 10:56:12 +0800 Subject: [PATCH] site: replace highlight.js with Prism.js --- package.json | 2 +- site/common/lib.js | 2 +- site/common/styles/highlight.less | 142 ++++++++++++++++++++++++++++++ site/common/styles/markdown.less | 2 +- site/common/styles/tomorrow.less | 56 ------------ 5 files changed, 145 insertions(+), 59 deletions(-) create mode 100644 site/common/styles/highlight.less delete mode 100644 site/common/styles/tomorrow.less diff --git a/package.json b/package.json index d099d40f9d..fdd2cb34f5 100644 --- a/package.json +++ b/package.json @@ -71,7 +71,7 @@ "warning": "~2.1.0" }, "devDependencies": { - "antd-md-loader": "~0.5.0", + "antd-md-loader": "~0.7.0", "atool-build": "^0.6.5", "babel-cli": "^6.2.0", "babel-core": "^6.2.1", diff --git a/site/common/lib.js b/site/common/lib.js index 2c58d24f87..4a700588cc 100644 --- a/site/common/lib.js +++ b/site/common/lib.js @@ -1,5 +1,5 @@ import 'antd/style/index.less'; -import './styles/tomorrow.less'; +import './styles/highlight.less'; import './styles/common.less'; import './styles/markdown.less'; import './styles/toc.less'; diff --git a/site/common/styles/highlight.less b/site/common/styles/highlight.less new file mode 100644 index 0000000000..262891e374 --- /dev/null +++ b/site/common/styles/highlight.less @@ -0,0 +1,142 @@ +/** + * prism.js default theme for JavaScript, CSS and HTML + * Based on dabblet (http://dabblet.com) + * @author Lea Verou + */ + +code[class*="language-"], +pre[class*="language-"] { + color: black; + background: none; + text-shadow: 0 1px white; + font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; + direction: ltr; + text-align: left; + white-space: pre; + word-spacing: normal; + word-break: normal; + word-wrap: normal; + line-height: 1.5; + + -moz-tab-size: 4; + -o-tab-size: 4; + tab-size: 4; + + -webkit-hyphens: none; + -moz-hyphens: none; + -ms-hyphens: none; + hyphens: none; +} + +pre[class*="language-"]::-moz-selection, +pre[class*="language-"] ::-moz-selection, +code[class*="language-"]::-moz-selection, +code[class*="language-"] ::-moz-selection { + text-shadow: none; + background: #b3d4fc; +} + +pre[class*="language-"]::selection, +pre[class*="language-"] ::selection, +code[class*="language-"]::selection, +code[class*="language-"] ::selection { + text-shadow: none; + background: #b3d4fc; +} + +@media print { + code[class*="language-"], + pre[class*="language-"] { + text-shadow: none; + } +} + +/* Code blocks */ +pre[class*="language-"] { + padding: 1em; + margin: .5em 0; + overflow: auto; +} + +:not(pre) > code[class*="language-"], +pre[class*="language-"] { + background: #f5f2f0; +} + +/* Inline code */ +:not(pre) > code[class*="language-"] { + padding: .1em; + border-radius: .3em; + white-space: normal; +} + +.token.comment, +.token.prolog, +.token.doctype, +.token.cdata { + color: slategray; +} + +.token.punctuation { + color: #999; +} + +.namespace { + opacity: .7; +} + +.token.property, +.token.tag, +.token.boolean, +.token.number, +.token.constant, +.token.symbol, +.token.deleted { + color: #905; +} + +.token.selector, +.token.attr-name, +.token.string, +.token.char, +.token.builtin, +.token.inserted { + color: #690; +} + +.token.operator, +.token.entity, +.token.url, +.language-css .token.string, +.style .token.string { + color: #a67f59; + background: hsla(0, 0%, 100%, .5); +} + +.token.atrule, +.token.attr-value, +.token.keyword { + color: #07a; +} + +.token.function { + color: #DD4A68; +} + +.token.regex, +.token.important, +.token.variable { + color: #e90; +} + +.token.important, +.token.bold { + font-weight: bold; +} +.token.italic { + font-style: italic; +} + +.token.entity { + cursor: help; +} diff --git a/site/common/styles/markdown.less b/site/common/styles/markdown.less index 75eeab6928..4e9a5b02d9 100644 --- a/site/common/styles/markdown.less +++ b/site/common/styles/markdown.less @@ -89,11 +89,11 @@ .markdown pre { border-radius: 6px; background: #f7f7f7; + padding: 1em 2em; } .markdown pre code { border: none; - padding: 1em 2em; background: #f7f7f7; margin: 0; } diff --git a/site/common/styles/tomorrow.less b/site/common/styles/tomorrow.less deleted file mode 100644 index c1983cd461..0000000000 --- a/site/common/styles/tomorrow.less +++ /dev/null @@ -1,56 +0,0 @@ -/* Tomorrow Theme */ -/* http://jmblog.hljs-github.hljs-com/color-themes-for-google-code-highlightjs */ -/* Original theme - https://github.hljs-com/chriskempson/tomorrow-theme */ -/* http://jmblog.hljs-github.hljs-com/color-themes-for-google-code-highlightjs */ -.hljs-tomorrow-comment, pre .hljs-comment { - color: #CCCCCC; -} - -.hljs-tomorrow-red, pre .hljs-variable, pre .hljs-attribute, pre .hljs-tag, pre .hljs-regexp, pre .hljs-ruby .hljs-constant, pre .hljs-xml .hljs-tag .hljs-title, pre .hljs-xml .hljs-pi, pre .hljs-xml .hljs-doctype, pre .hljs-html .hljs-doctype, pre .hljs-css .hljs-id, pre .hljs-css .hljs-class, pre .hljs-css .hljs-pseudo { - color: #BB0606; -} - -.hljs-tomorrow-orange, pre .hljs-number, pre .hljs-preprocessor, pre .hljs-built_in, pre .hljs-literal, pre .hljs-params, pre .hljs-constant { - color: #FF6600; -} - -.hljs-tomorrow-yellow, pre .hljs-class, pre .hljs-ruby .hljs-class .hljs-title, pre .hljs-css .hljs-rules .hljs-attribute { - color: #1D80D3; -} - -.hljs-tomorrow-green, pre .hljs-string, pre .hljs-value, pre .hljs-inheritance, pre .hljs-header, pre .hljs-ruby .hljs-symbol, pre .hljs-xml .hljs-cdata { - color: #39A30E; -} - -.hljs-tomorrow-aqua, pre .hljs-css .hljs-hexcolor { - color: #01B3CA; -} - -.hljs-tomorrow-blue, pre .hljs-function, pre .hljs-python .hljs-decorator, pre .hljs-python .hljs-title, pre .hljs-ruby .hljs-function .hljs-title, pre .hljs-ruby .hljs-title .hljs-keyword, pre .hljs-perl .hljs-sub, pre .hljs-javascript .hljs-title, pre .hljs-coffeescript .hljs-title { - color: #4271ae; -} - -.hljs-tomorrow-purple, pre .hljs-keyword, pre .hljs-javascript .hljs-function { - color: #1D80D3; -} - -code { - background: #f7f7f7; - padding: 1px 6px; - border-radius: 3px; - color: #888; - font-size: 0.8rem; - border: 1px solid #e9e9e9; -} - -pre code { - display: block; - background: white; - color: #666; - line-height: 1.5; - border: 1px solid #e9e9e9; - padding: 10px 15px; - border-radius: 6px; - font-size: 13px; - white-space: pre; -}