10分鐘寫一個markdown編輯器 - bhaltair－IT工程師數位筆記本

文章出處

marked.js

Marked是一個Markdown解析引擎。

vue.js

Vue.js（讀音 /vjuː/, 類似于 view）是一套構建用戶界面的漸進式框架。與其他重量級框架不同的是，Vue 采用自底向上增量開發的設計。Vue 的核心庫只關注視圖層，并且非常容易學習，非常容易與其它庫或已有項目整合。另一方面，Vue 完全有能力驅動采用單文件組件和Vue生態系統支持的庫開發的復雜單頁應用。

Vue.js 的目標是通過盡可能簡單的 API 實現響應的數據綁定和組合的視圖組件。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        html, body, #editor {
          margin: 0;
          height: 100%;
          font-family: 'Helvetica Neue', Arial, sans-serif;
          color: #333;
        }

        textarea, #editor div {
          display: inline-block;
          width: 49%;
          height: 100%;
          vertical-align: top;
          box-sizing: border-box;
          padding: 0 20px;
        }

        textarea {
          border: none;
          border-right: 1px solid #ccc;
          resize: none;
          outline: none;
          background-color: #f6f6f6;
          font-size: 14px;
          font-family: 'Monaco', courier, monospace;
          padding: 20px;
        }

        code {
          color: #f66;
        }

    </style>
</head>
<body>
    <div id="editor">
      <textarea :value="input" @input="update"></textarea>
      <div v-html="compiledMarkdown"></div>
    </div>

    <script type="text/javascript" src="marked.js"></script>
    <script type="text/javascript" src="vue.js"></script>
    <script type="text/javascript">
        new Vue({
          el: '#editor',
          data: {
            input: '# hello'
          },
          computed: {
            compiledMarkdown: function () {
              return marked(this.input, { sanitize: true })
            }
          },
          methods: {
            update: function(e) {
                this.input = e.target.value;
            }
          }
        })

    </script>
    
</body>
</html>

文章列表