Home → Questions →

Add jQuery or Scripts

• Edit

royl

15 Aug, 2016 05:49 PM

Is there a way to add custom jQuery or Javascript to refine the HTML generated?

1. Support Staff 1 Posted by Brett on 15 Aug, 2016 06:05 PM

   

   You can include standard HTL script tags in a Markdown document. There's
   no mechanism in Marked for automatically adding scripts to exported
   HTML.

   -Brett

   • Edit

2. 2 Posted by Roy Levien on 15 Aug, 2016 06:41 PM

   

   So I can add a script in the Markdown, and expect it to work as normal; e.g. to modify the HTML during rendering? (It seems not to work)

   • Edit

3. Support Staff 3 Posted by Brett on 15 Aug, 2016 06:43 PM

   

   Depends on the script. Note that Marked runs a lot of JavaScript as part
   of its functionality and there may be conflicts. The Inspector is
   available for debugging.

   -Brett

   • Edit

4. 4 Posted by Roy Levien on 15 Aug, 2016 07:24 PM

   

   Something like

   <script src="jquery-1.12.4.min.js"></script>
   <script type="text/javascript">
   $(function(){ $('a:contains(AWS)').addClass('test'); });
   </script>

   (Where do I find the Inspector?)

   • Edit

5. Support Staff 5 Posted by Brett on 15 Aug, 2016 07:30 PM

   

   Jquery is already loaded, so skip that. The inspector is accessible via right click anywhere in the preview.

   -Brett

   • Edit

6. 6 Posted by Roy Levien on 15 Aug, 2016 07:48 PM

   

   Without loading jQuery I get an error ($ not defined). With it I get no error but nothing happens as expected.

   <script type="text/javascript">
   $('li').each(function() {
        var className = $(this).html().replace(' ', '').toLowerCase();
        $(this).addClass(className);
   });
   </script>

   • Edit

7. Support Staff 7 Posted by Brett on 15 Aug, 2016 08:56 PM

   

   You need a wrapper function, e.g.

   (function($){
   $('li').each(function() {
          var className = $(this).html().replace(' ', '').toLowerCase();
   $(this).addClass(className);
   });
   })(jQuery);

   -Brett

   • Edit

8. 8 Posted by Roy Levien on 15 Aug, 2016 09:14 PM

   

   If I put this

   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
   <script type="text/javascript">
   (function($) {
     $('li').each(function() {
       var className = $(this).html().replace(' ', '').toLowerCase();
       $(this).addClass(className);
     });
   })(jQuery);
   </script>

   at the beginning of my Markdown, I get no errors, but nothing happens (I’m, expecting all the LI elements to have a class added corresponding to the content of tie item

   • Edit

9. Support Staff 9 Posted by Brett on 15 Aug, 2016 09:29 PM

   

   Then there's probably a conflict with the built-in scripts that isn't
   throwing an error. This isn't intended Marked functionality, so I can't
   offer a lot of support with debugging. I will say, though, that as I
   mentioned before jQuery is already loaded in the preview and loading it
   twice can cause unexpected results.

   -Brett

   • Edit

10. 10 Posted by Roy Levien on 15 Aug, 2016 09:44 PM

    

    Loading it is necessary though. Otherwise I get an error. Perhaps Marked is putting the script in an odd spot where it can’t see jQuery (and perhaps can’t see the document’s HTML, which might explain nothing happening)?

    • Edit

11. Support Staff 11 Posted by Brett on 16 Aug, 2016 04:09 PM

    

    Ok, you seem to be correct about the internal jQuery not being loaded in
    time to handle the script within the document body. However, if I run
    your script above I do get classes added to each item. Have you looked
    in the inspector to ensure you're not seeing the proper results (just
    right click a list item and Inspect)?

    -Brett

    • Edit

12. 12 Posted by Roy Levien on 16 Aug, 2016 05:59 PM

    

    Hmm, weird.

    Here’s my complete Markdown:

     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

    <script type="text/javascript">
    (function($) {
      $('li').each(function() {
        var className = $(this).html().replace(' ', '').toLowerCase();
        $(this).addClass(className);
      });
    })(jQuery);
    </script>
     
    ## Test 1
    * One
    * Two

    ## Test 2
    * Three
    + Four

    and here’s what’s rendered

    <p> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script></p>

    <script type="text/javascript">
    (function($) {
      $('li').each(function() {
        var className = $(this).html().replace(' ', '').toLowerCase();
        $(this).addClass(className);
      });
    })(jQuery);
    </script>

    <h2 id="test-1">Test 1</h2>

    <ul>
    <li>One</li>
    <li>Two</li>
    </ul>

    <h2 id="test-2">Test 2</h2>

    <ul>
    <li>Three</li>
    <li>Four</li>
    </ul>

    • Edit

13. Support Staff 13 Posted by Brett on 16 Aug, 2016 06:03 PM

    

    Are you looking at the source view/exported HTML? That won't show the
    added classes, those would only be rendered live in a browser. Also,
    move the script to the end of the file.

    • Edit

14. 14 Posted by Roy Levien on 16 Aug, 2016 06:51 PM

    

    I’m looking at “Switch to HTML source view”. Will they be rendered so that the CSS used by Marked 2 will be able to select on the added classes (that’s the goal)?

    For example

    li[class*="AWS"] {
    color: red;
    }

    has no effect.

    • Edit

15. Support Staff 15 Posted by Brett on 16 Aug, 2016 07:25 PM

    

    Please clarify, has no effect where?

    -Brett

    • Edit

16. 16 Posted by Roy Levien on 16 Aug, 2016 07:36 PM

    

    In how it’s rendered in Marked 2. If I have that CSS in my custom stylesheet. And I have the code to add the classes in my Markdown. None of the elements that should have the classes attached by the code (a) seem to have it attached when viewed; nor (b) render as if they do.

    • Edit

17. Support Staff 17 Posted by Brett on 16 Aug, 2016 07:43 PM

    

    Your CSS is all caps, while your javascript calls toLowerCase(). It would never match.

    • Edit

18. 18 Posted by Roy Levien on 16 Aug, 2016 07:46 PM

    

    No content.

    • Edit