SOURCE

console 命令行工具 X clear

                    
>
console
var app = new Vue({
  el: '#app',
  data: {
    // message: '20到2f /\n3a到40:@\n5b到60[`\n7b到7e{~\n万w09azAZ'
    message: ''
  },
  computed: {
    newMessage: function() {
      return this.message.replace(/[\u0020-\u002f, \u003a-\u0040, \u005b-\u0060, \u007b-\u007e, \uFF10-\uFF19, \uFF21-\uFF3A, \uFF41-\uFF5A]/g, '<code>$&</code>').replace(/w/g, '<code>$&</code>').replace(/\u000A/g, '<br>')
    }
  }
})
<div id="app">
  <div class="weui-panel weui-panel_access">
    <div class="weui-panel__bd">
      <a href="javascript:void(0);" class="weui-media-box weui-media-box_appmsg">
        <div class="weui-media-box__hd">
          <img class="weui-media-box__thumb" src="http://chuantu.biz/t6/326/1528392624x-1404755552.jpg" style="border-radius: 50%">
        </div>
        <div class="weui-media-box__bd">
          <h4 class="weui-media-box__title">
            胡小刀「尊贵专属」微信文章检查器
          </h4>
        </div>
      </a>
    </div>
  </div>
  <div class="weui-cells__title">
    原文
  </div>
  <div class="weui-cells">
    <div class="weui-cell">
      <textarea class="weui-textarea" v-model="message" placeholder="在这里贴入文章,半角符号、半角字母 w、全角数字及字母,会以黄色标注。"
      rows="5" cols="80">
      </textarea>
    </div>
  </div>
  <div class="weui-cells__title">
    总字数: {{ message.length }}
    <p>
      &#x1f496; 以下为检查后内容 &#x1f496;
    </p>
  </div>
  <article class="weui-article" v-html="newMessage">
  </article>
  <div class="weui-footer">
    <p class="weui-footer__text">
      Copyright &copy; 2018 NY
    </p>
  </div>
</div>
<!-- js 开始 -->
<script src="https://cdn.jsdelivr.net/npm/vue">
</script>
code {
  background-color: yellow;
}

本项目引用的自定义外部资源