Vue.jsを試す（５）妄想チャレンジ・・・表示の仕方を変えてみる

<!DOCTYPE html>
<html>

  <head>
    <link data-require="highlight.js@*" data-semver="0.7.3" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/7.3/styles/solarized_dark.min.css" />
    <link data-require="highlight.js@*" data-semver="0.7.3" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/7.3/styles/github.min.css" />
    <link data-require="highlight.js@*" data-semver="0.7.3" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/7.3/styles/default.min.css" />
    <link rel="stylesheet" href="guide.css" />
    <link rel="stylesheet" href="style.css" />
  </head>

  <body>
    <div id="app">
      <div v-for="style in styles">
        <div v-html="style.html"></div>
      </div>
    </div>
    <script data-require="jquery@2.2.4" data-semver="2.2.4" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
    <script data-require="vue.js@*" data-semver="10.0.26" src="https://cdn.jsdelivr.net/vue/1.0.26/vue.min.js"></script>
    <script data-require="axios@*" data-semver="0.018.0" src="https://unpkg.com/axios@0.18.0/dist/axios.min.js"></script>
    <script data-require="marked@*" data-semver="0.3.5" src="https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.5/marked.min.js"></script>
    <script data-require="highlight.js@*" data-semver="0.7.3" src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/7.3/highlight.min.js"></script>
    <script src="guide.js"></script>
  </body>

</html>

(function(global, $) {
  marked.setOptions({
    langPrefix: '',
    highlight: function(code, lang) {
      return hljs.highlightAuto(code, [lang]).value;
    }
  });
  
  var app = new Vue({
    el: '#app',
    data: {
      message: 'You loaded this page on ' + new Date().toLocaleString(),
      seen: false
    },
    methods: {
      set: function(data) {
        Vue.set(app, 'styles', data.sort());
      }
    }
  });

  axios.get('./style.css')
  .then(function (response) {
    var res = response.data.match(/\/\*docs[\s\S]*?\*\//gm);
    var data = [];

    res.forEach(function(v,i,a) {
      // コメント開始・終了削除
      a[i] = a[i].replace(/\/\*docs[\s\S]/, '').replace(/[\s\S]\*\//, '');
      // sample表示用HTML取得
      var sample = a[i].match(/\`\`\`html[\s\S]*?\`\`\`/gm);
      // Markdown形式に変換
      a[i] = marked(a[i]);
      // sample表示用HTMLが存在する場合、サンプル枠を追加
      if (sample !== null) {
      sample = sample[0].replace(/\`\`\`html[\s\S]/, '').replace(/[\s\S]\`\`\`/, '');
        a[i] = a[i] + '<div class="sample">' + sample + '</div>';
      }
      // dataにsample表示用HTML追加
      data[i] = {
        html: a[i]
      };
    });
    app.set(data);
  })
  .catch(function (error) {
    console.log(error);
  });

})(window, jQuery);

/*docs
テキストカラー：<span class="text-red">赤■</span>

```html
<span class="text-red">赤</span>
```
*/
.text-red {
  color: #f66;
}

/*docs
テキストカラー：<span class="text-blue">青■</span>

```html
<span class="text-blue">.test</span>
```
*/
.text-blue {
  color: #66f;
}

pre {
  margin-bottom: 0;
}

.sample {
  border: 1px dashed #eaeaea;
  border-top: 0;
}