Giter VIP home page Giter VIP logo

markdown-to-vue-loader's People

Contributors

dependabot[bot] avatar fengyuanchen avatar greggunner avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar

markdown-to-vue-loader's Issues

是否可以动态演示?

看了下,好像无法动态演示。是不是只是将HTML渲染出来而已,比如说双向流数据变化等无法体现出来。而且用的是template,不是render。感觉只完成了一部分。作者是否考虑过动态演示?

A non working markdown example

I get an Error compiling template when I try to run this example. I am using Webpack 4.

The full stack trace:

ERROR in ./src/markdown.md?vue&type=template&id=fe0ebb70 (../node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!../node_modules/vue-loader/lib!../node_modules/markdown-to-vue-loader/dist!./src/markdown.md?vue&type=template&id=fe0ebb70)
(Emitted value instead of an instance of Error)
  Error compiling template:

    <div class="markdown"><h1>Hello</h1>
  <p><code>&lt;span&gt;{{sss}}&lt;/span&gt;</code></p>
  <blockquote>
  <p>This is test.</p>
  </blockquote>
  <ul>
  <li>How are you?</li>
  <li>Fine, Thank you, and you?</li>
  <li>I&#x2019;m fine&#xFF0C; too. Thank you.</li>
  <li>&#x1F31A;</li>
  </ul>
  <pre v-pre=""><code class="language-javascript">import Vue from 'vue'

  Vue.config.debug = true
  </code></pre>
  <div class="test">
    {{ model }} test
  </div>
  <p><compo>{{ model }}</compo></p>
  <div class="abc" @click="show = false">
    &#x554A;&#x54C8;&#x54C8;&#x54C8;
  </div>
  <blockquote>
  <p>All script or style tags in html mark will be extracted.Script will be excuted, and style will be added to document head.
  Notice if there is a string instance which contains special word &#x201C;&lt;/script&gt;&#x201D;, it will fetch a SyntaxError.
  Due to the complexity to solve it, just don&#x2019;t do that.</p>
  </blockquote>
  <component-markdown-1></component-markdown-1><pre v-pre=""><code class="language-html">&lt;style scoped&gt;
    .test {
      background-color: green;
    }
  &lt;/style&gt;

  &lt;style scoped&gt;
    .abc {
      background-color: yellow;
    }
  &lt;/style&gt;
  &lt;script&gt;
    let a=1&lt;2;
    let b=&quot;&lt;-forget it-/script&gt;&quot;;
    console.log(&quot;***This script tag is successfully extracted and excuted.***&quot;)
    module.exports = {
      components: {
        compo: {
          render(h) {
            return h('div', {
              style: {
                background: 'red'
              }
            }, this.$slots.default);
          }
        }
      },

      data () {
        return {
          model: 'abc'
        }
      }
    }
  &lt;/script&gt;
  jjjjjjjjjjjjjjjjjjjjjj
  &lt;template&gt;
    &lt;div&gt;&lt;/div&gt;
  &lt;/template&gt;
  </code></pre>
  <div>
  </div>
  <p>sadfsfs</p>
  <p>&#x5927;&#x5BB6;&#x54E6;&#x54E6;&#x597D;&#x554A;&#x8C01;&#x90FD;&#x53D1;&#x751F;&#x5730;&#x65B9;&#x4E0A;&#x7684;&#x51AF;&#x7ECD;&#x5CF0;s</p>
  <blockquote>
  <p>sahhhh</p>
  </blockquote>
  <p><compo>{{ model }}</compo></p>
  <component-markdown-2></component-markdown-2><pre v-pre=""><code class="language-html">&lt;compo&gt;{{model }}{{model }}{{model }}{{model }}{{ model }}&lt;/compo&gt;
  </code></pre>
  <style src="./custom.css"></style>
  <h2>&#x5F15;&#x5165; style &#x6587;&#x4EF6;</h2>
  <div class="custom">
    &#x539F;&#x8C05;&#x8272;
  </div>
  </div>

  - Templates should only be responsible for mapping the state to the UI. Avoid placing tags with side-effects in your templates, such as <style>, as they will not be parsed.

 @ ./src/markdown.md?vue&type=template&id=fe0ebb70 1:0-240 1:0-240
 @ ./src/markdown.md
 @ ../node_modules/babel-loader/lib??ref--5-0!../node_modules/vue-loader/lib??vue-loader-options!./src/app.vue?vue&type=script&lang=js
 @ ./src/app.vue?vue&type=script&lang=js
 @ ./src/app.vue
 @ ./src/entry.js
 @ multi ../node_modules/webpack-dev-server/client?http://localhost:8888 webpack/hot/dev-server ./src/entry.js

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.