Using this plugin in browser?

canebat commented 9 years ago

Hello, thanks for this plugin. Can you provide example how to load it in browser?

ie,

<script>
    var md = window.markdownit();
    var result = md.render('![image](https://octodex.github.com/images/minion.png =50x)');
</script>

tatsy commented 9 years ago

Hello, @canebat. Thank you for your interest for this plugin.

In order to use this plugin (and also original markdown-it) in browser, you have to use RequireJS or other similar packages to enable us to use node.js "require" in non-node.js environment.

If you provide me the detail of your environment, maybe I can show you a clearer way to use this plugin.

Thanks.

canebat commented 9 years ago

@tatsy Oh okay, I will take a look at RequireJS.

Would it be possible to support loading it directly into the page? The markdown-it-emoji plugin has that ability:

var md = window.markdownit().use(window.markdownitEmoji);

tatsy commented 9 years ago

@canebat I'm sorry but you need to use require.js for this plugin. So you cannot load directly into the page. Following is the whole codes to call this plugin with require.js.

If you have any other questions, please do not hesitate to ask me. Thanks.

index.html

<html>
<head>
  <script src="/path/to/markdown-it.min.js"></script>
  <script src="/path/to/markdown-it-imsize.min.js"></script>
  <script src="/path/to/require_config.js"></script>
  <script src="/path/to/require.js"></script>
</head>

<body>
  <div id="image-box"></div>
  <script>
    require(['require', 'MarkdownItImsize'], function(require) {
      var md = window.markdownit({
        html: true,
        linkify: true,
        typography: true
      }).use(require('MarkdownItImsize'));

      // Your code using markdwon-it-imsize below
      document.getElementById('image-box').innerHTML = md.render('![test](test.jpg =100x200)');
    });
  </script>
</body>
</html>

require_config.js

var require = {
  paths: {
    // Be careful, you don't have to add '.js' after the file name
    'MarkdownItImsize': '/path/to/markdown-it-imsize.min'
  }
};

tatsy / markdown-it-imsize

Using this plugin in browser? #5

index.html

require_config.js