omi-cloud - code highlighting！

2019-04-01 17:35:44 +08:00 · 2019-04-01 17:35:44 +08:00 · 27c90e81e9
parent 113fab6bb1
commit 27c90e81e9
4 changed files with 278 additions and 14 deletions
--- a/packages/omi-cloud/src/components/wxParse/wxParse.js
+++ b/packages/omi-cloud/src/components/wxParse/wxParse.js
@ -14,6 +14,7 @@
 **/
 import showdown from './showdown.js';
 import HtmlToJson from './html2json.js';
+import prism from '../../libs/prism'
 /**
 * 配置及公有属性
 **/
@ -33,12 +34,12 @@ function wxParse(bindName = 'wxParseData', type='html', data='<div class="color:
  var transData = {};//存放转化后的数据
  if (type == 'html') {
    transData = HtmlToJson.html2json(data, bindName);
-    console.log(JSON.stringify(transData, ' ', ' '));
+    //console.log(JSON.stringify(transData, ' ', ' '));
  } else if (type == 'md' || type == 'markdown') {
    var converter = new showdown.Converter();
    var html = converter.makeHtml(data);
    transData = HtmlToJson.html2json(html, bindName);
-    console.log(JSON.stringify(transData, ' ', ' '));
+    //console.log(JSON.stringify(transData, ' ', ' '));
  }
  transData.view = {};
  transData.view.imagePadding = 0;
@ -47,10 +48,27 @@ function wxParse(bindName = 'wxParseData', type='html', data='<div class="color:
  }
  var bindData = {};
  bindData[bindName] = transData;
+  
+  transPre(transData)
+  
  that.setData(bindData)
  that.wxParseImgLoad = wxParseImgLoad;
  that.wxParseImgTap = wxParseImgTap;
 }
+
+function transPre(transData){
+  transData.nodes.forEach((node,index)=>{
+    if(node.tag == 'pre'){
+      var lan = 'markup'
+      if(node.nodes[0].classStr){
+        lan =node.nodes[0].classStr.split(' ')[0].replace('language-', '')
+      }
+      var tks = prism.tokens( node.nodes[0].nodes[0].text, prism.languages[lan], lan)
+      transData.nodes[index].tks = tks
+    }
+  })
+}
+
 // 图片点击事件
 function wxParseImgTap(e) {
  var that = this;
--- a/packages/omi-cloud/src/components/wxParse/wxParse.wxml
+++ b/packages/omi-cloud/src/components/wxParse/wxParse.wxml
@ -22,6 +22,26 @@
  />
 </template>

+<!-- 千万 不要格式化下面的 wxml，不然 text 嵌套 text 导致换行全部出来了 -->
+<template name="wxParseCode">
+  <view class="pre language-jsx">
+      <view class="code">
+          <block wx:for="{{item.tks}}" wx:for-item="tk">
+              <block wx:if="{{tk.deep}}"><text class="{{'token ' + tk.type}}"><block wx:for="{{tk.content}}" wx:for-item="stk"><block wx:if="{{stk.deep}}"><text class="{{'token ' + sstk.type}}" wx:for="{{stk.content}}" wx:for-item="sstk">{{sstk.content || sstk}}</text>
+              </block>
+              <block wx:else><text class="{{'token ' + stk.type}}">{{stk.content || stk}}</text>
+              </block>
+          </block>
+          </text>
+  </block>
+  <block wx:else><text class="{{'token ' + tk.type}}">{{tk.content || tk}}</text>
+  </block>
+  </block>
+  </view>
+  </view>
+</template>
+
+
 <template name="WxEmojiView">
  <text class="WxEmojiView wxParse-inline" style="{{item.styleStr}}">
    <block wx:for="{{item.textArray}}" wx:key="">
@ -105,8 +125,13 @@
    <!--其他块级标签-->
    <block wx:elif="{{item.tagType == 'block'}}">
      <view class="{{item.classStr}} wxParse-{{item.tag}}" style="{{item.styleStr}}">
-        <block wx:for="{{item.nodes}}" wx:for-item="item" wx:key="">
-          <template is="wxParse1" data="{{item}}" />
+        <block wx:if="{{item.tag == 'pre'}}">
+           <template is="wxParseCode" data="{{item}}" />
+        </block>
+        <block wx:elif="{{item.tag != 'pre'}}" >
+          <block wx:for="{{item.nodes}}" wx:for-item="item" wx:key="">
+            <template is="wxParse1" data="{{item}}" />
+          </block>
        </block>
      </view>
    </block>
--- a/packages/omi-cloud/src/pages/code/index.js
+++ b/packages/omi-cloud/src/pages/code/index.js
@ -67,18 +67,19 @@ render(<my-counter />, 'body')
    const { tks } = this.data
    return (
      <view class='pre language-jsx'>
-      <view class='code'>
-        {tks.map(tk => {
-          return tk.type === 'tag' ? <text class={'token ' + tk.type}>{tk.content.map(stk => {
-            return  stk.deep ? stk.content.map(sstk => {
-              return <text class={'token ' + sstk.type}>{sstk.content || sstk}</text>
-            }) : <text class={'token ' + stk.type}>{stk.content || stk}</text>
-          })}</text> : <text class={'token ' + tk.type}>{tk.content || tk}</text>
-        })}
+        <view class='code'>
+          {tks.map(tk => {
+            return tk.deep ? <text class={'token ' + tk.type}>{
+              tk.content.map(stk => {
+                return stk.deep ? stk.content.map(sstk => {
+                  return <text class={'token ' + sstk.type}>{sstk.content || sstk}</text>
+                }) : <text class={'token ' + stk.type}>{stk.content || stk}</text>
+              })}</text> : <text class={'token ' + tk.type}>{tk.content || tk}</text>
+          })}
+        </view>
      </view>
-    </view>

-     
+
    )
  }
 })
--- a/packages/omi-cloud/src/pages/detail/index.css
+++ b/packages/omi-cloud/src/pages/detail/index.css
@ -324,3 +324,223 @@ view {
 .wxParse-thead > text.WxEmojiView.wxParse-inline{
  display: none;
 }
+
+/* PrismJS 1.16.0
+https://prismjs.com/download.html#themes=prism-okaidia&languages=markup+css+clike+javascript+bash+json+typescript+jsx+tsx&plugins=line-highlight+line-numbers */
+/**
+ * okaidia theme for JavaScript, CSS and HTML
+ * Loosely based on Monokai textmate theme by http://www.monokai.nl/
+ * @author ocodia
+ */
+
+ .code[class*="language-"],
+ .pre[class*="language-"] {
+   color: #f8f8f2;
+   background: none;
+   text-shadow: 0 1px rgba(0, 0, 0, 0.3);
+   font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
+   font-size: 25rpx;
+   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;
+ }
+ 
+ /* Code blocks */
+ .pre[class*="language-"] {
+   padding: 1em;
+   margin: .5em 0;
+   overflow: auto;
+   border-radius: 0.3em;
+ }
+ 
+ :not(.pre) > .code[class*="language-"],
+ .pre[class*="language-"] {
+   background: #272822;
+ }
+ 
+ /* 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: #f8f8f2;
+ }
+ 
+ .namespace {
+   opacity: .7;
+ }
+ 
+ .token.property,
+ .token.tag,
+ .token.constant,
+ .token.symbol,
+ .token.deleted {
+   color: #f92672;
+ }
+ 
+ .token.boolean,
+ .token.number {
+   color: #ae81ff;
+ }
+ 
+ .token.selector,
+ .token.attr-name,
+ .token.string,
+ .token.char,
+ .token.builtin,
+ .token.inserted {
+   color: #a6e22e;
+ }
+ 
+ .token.operator,
+ .token.entity,
+ .token.url,
+ .language-css .token.string,
+ .style .token.string,
+ .token.variable {
+   color: #f8f8f2;
+ }
+ 
+ .token.atrule,
+ .token.attr-value,
+ .token.function,
+ .token.class-name {
+   color: #e6db74;
+ }
+ 
+ .token.keyword {
+   color: #66d9ef;
+ }
+ 
+ .token.regex,
+ .token.important {
+   color: #fd971f;
+ }
+ 
+ .token.important,
+ .token.bold {
+   font-weight: bold;
+ }
+ .token.italic {
+   font-style: italic;
+ }
+ 
+ .token.entity {
+   cursor: help;
+ }
+ 
+ .pre[data-line] {
+   position: relative;
+   padding: 1em 0 1em 3em;
+ }
+ 
+ .line-highlight {
+   position: absolute;
+   left: 0;
+   right: 0;
+   padding: inherit 0;
+   margin-top: 1em; /* Same as .prism’s padding-top */
+ 
+   background: hsla(24, 20%, 50%,.08);
+   background: linear-gradient(to right, hsla(24, 20%, 50%,.1) 70%, hsla(24, 20%, 50%,0));
+ 
+   pointer-events: none;
+ 
+   line-height: inherit;
+   white-space: pre;
+ }
+ 
+   .line-highlight:before,
+   .line-highlight[data-end]:after {
+     content: attr(data-start);
+     position: absolute;
+     top: .4em;
+     left: .6em;
+     min-width: 1em;
+     padding: 0 .5em;
+     background-color: hsla(24, 20%, 50%,.4);
+     color: hsl(24, 20%, 95%);
+     font: bold 65%/1.5 sans-serif;
+     text-align: center;
+     vertical-align: .3em;
+     border-radius: 999px;
+     text-shadow: none;
+     box-shadow: 0 1px white;
+   }
+ 
+   .line-highlight[data-end]:after {
+     content: attr(data-end);
+     top: auto;
+     bottom: .4em;
+   }
+ 
+ .line-numbers .line-highlight:before,
+ .line-numbers .line-highlight:after {
+   content: none;
+ }
+ 
+ .pre[class*="language-"].line-numbers {
+   position: relative;
+   padding-left: 3.8em;
+   counter-reset: linenumber;
+ }
+ 
+ .pre[class*="language-"].line-numbers > .code {
+   position: relative;
+   white-space: inherit;
+ }
+ 
+ .line-numbers .line-numbers-rows {
+   position: absolute;
+   pointer-events: none;
+   top: 0;
+   font-size: 100%;
+   left: -3.8em;
+   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: 0.8em;
+       text-align: right;
+     }
+ 
+