How to parse content using an external library? (Markdown Previewer Project)

JavaScript
1

Hi everyone,

I’ve already done the weather, twitch, and quote projects, so I’m familiar with fetching data from an external website and using JSON.parse() to turn it into a JavaScript object.

However, the following question, from the Markdown Previewer project, seems different to me, and has me stumped:

Instruction from project: When I enter GitHub flavored markdown into the #editor element, the text is rendered as HTML in the #preview element as I type (HINT: You don’t need to parse Markdown yourself - you can import the Marked library for this: https://cdnjs.com/libraries/marked).

  1. That link has dozens of options of how to access the library. I don’t know which one to choose.
Here are just a few of their many options:

  • marked.js

  • marked.min.js

  • marked.min.js.map (this one seems right, because I’ll probably map the user input using functions from this library, but that’s just a guess :rofl:…)

  1. Once I have chosen one of these libraries above, how do I best load it into my project?
How I'm loading it so far, with AJAX

  • I’ve been able to successfully load marked.js into my project with an AJAX request, and then display the entire library (lots of code like Hacky. if (~item.indexOf('\n ')) :thinking::thinking::thinking:).

  • Is there something better than this AJAX method I used:

function loadDoc() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById("demo").innerHTML =
      this.responseText;
    }
  };
  xhttp.open("GET", "https://cdnjs.cloudflare.com/ajax/libs/marked/0.4.0/marked.js", true);
  xhttp.send();
}
  1. Perhaps the most important question… how do I use this library once I’ve loaded it, to parse the input.

Any advice, lesson links, or article links would be appreciated! :innocent: For any of these questions…

Sorry if the answer is hidden in plain sight…just haven’t been able to find it so far…

Thanks!
Jan

2

  1. The .js file is the JavaScript library, .min.js is the minified version of the same library which is what you should import and the .js.map is the sourcemap of the library for debugging.

  2. You can load it from script tag either inside the head element or the end of body element.

  3. You have to refer to the library’s website for usage.

2 Likes
3

This is a library so you don’t load it with AJAX, you load it just like you do jQuery or React for example. The min version is just a minified version of the “normal” one, smaller so it loads faster. Many people prefer to use the unminified one in development so they get better error messages, but use the minified one in production so it loads faster.

If you’re in a “real” web page, you’re going to load this JS file in your HTML with a script tag. If you’re in codepen, you load it in settings/javascript, down at the bottom, just like jQuery, etc.

1 Like
4

Thank you @pavi2410! Good to know that each library has its own usage rules. Thank you! I found the rules.

1 Like
5

Thanks @kevinSmith !

I am using codepen, so it was very simple to just load the library into the settings like I do with jQuery.

And thanks for the explanation of .min — that makes sense now!