title: prettify json string vuejs2 webpack
body: <p>i try filter my json string into JSON highlight syntax or kinda like a json prettify with pre element tags. I dont want a tree json viewer but just a nice JSON syntax highlight.</p>
  
  <p>template</p>
  
  <pre><code>&lt;div id="app"&gt;
    &lt;pre&gt;{{{ json | jsonPretty }}}&lt;/pre&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>vue</p>
  
  <pre><code>var vm = new Vue({
    el: '#app',
    data() {
      return {
        json:'{ "name: "John Doe" }'
      }
    },
    filters: {
      jsonPretty: function(value) {
        let json = JSON.stringify(JSON.parse(value), null, 2)
        json = json.replace(/&amp;/g, '&amp;amp;').replace(/&lt;/g, '&amp;lt;').replace(/&gt;/g, '&amp;gt;')
        return json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+]?\d+)?)/g, function(match) {
          var cls = 'number'
          if (/^"/.test(match)) {
            if (/:$/.test(match)) {
              cls = 'key'
            } else {
              cls = 'string'
            }
          } else if (/true|false/.test(match)) {
            cls = 'boolean'
          } else if (/null/.test(match)) {
            cls = 'null'
          }
          return '&lt;span class="' + cls + '"&gt;' + match + '&lt;/span&gt;'
        })
      }
    }
  });
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>pre {
    outline: 1px solid #ccc;
    padding: 15px; 
    margin: 5px;
    background: white;
   }
  .string { color: green; }
  .number { color: darkorange; }
  .boolean { color: blue; }
  .null { color: magenta; }
  .key { color: red; }
  </code></pre>
  
  <p>i try at jsfiddle, it's working but when i try with webpack official vuejs template, it show error</p>
  
  <pre><code>ERROR in ./~/vue-loader/lib/template-compiler?{"id":"data-v-4b8ecaca","hasScoped":true,"transformToRequire":{"video":"src","source":"src","img":"src","image":"xlink:href"}}!./~/vue-loader/lib/selector.js?type=template&amp;index=0!./src/components/Hello.vue
  (Emitted value instead of an instance of Error) 
    Error compiling template:
  
    &lt;div class="hello"&gt;
      &lt;div class=""&gt;
  
        &lt;pre&gt;{{{ json | jsonPretty }}}&lt;/pre&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
    - invalid expression: {{{ json | jsonPretty }}}
  
   @ ./src/components/Hello.vue 10:2-300
   @ ./~/babel-loader/lib!./~/vue-loader/lib/selector.js?type=script&amp;index=0!./src/App.vue
   @ ./src/App.vue
   @ ./src/main.js
   @ multi ./build/dev-client ./src/main.js
  </code></pre>
  
  <p>EDIT : add jsfiddle link</p>
  
  <p><a href="https://jsfiddle.net/Ljck1wmL/5/" rel="nofollow noreferrer">https://jsfiddle.net/Ljck1wmL/5/</a></p>