Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,297
    Thanks
    10
    Thanked 584 Times in 565 Posts

    handy forum code viewer

    sometimes we see posts with html docs or javascript in a code box. While this lets up easily see the code, it doesn't let us test and interact with it. The following is a simple snippet/bookmarklet code/user script that adds view buttons above all the code boxes. It decects HTML docs and lets you view them, or shows other code in big clean letters on a clutter-free screen without lots of scrolling. For js snips, you can hold [CTRL] while clicking the button to load the code in a <script> tag, making any syntax or reference errors viewable in the console. i've used it for a while, and i think some other folks might be able to get some kicks out of it, so here it is.

    feel free to improve and repost, it can be fancier. please, that would be fun.
    maybe some syntax highlighting, download buttons, jsHint/w3 validator links, etc.


    Code:
    // ==UserScript==
    // @name       Coding Forums Code Viewer
    // @namespace  http://danml.com/
    // @version    1.0
    // @description  lets you view HTML and test JS in posts with a simple button click
    // @match      http://www.codingforums.com/showthread.php?t=*
    // @copyright  2013, dandavis
    // ==/UserScript==
    
    [].slice.call(document.querySelectorAll("pre.alt2")).map(function(elm){
     var code=elm.textContent, but=document.createElement("button");
     but.innerHTML="popup";
     but.title="Click to view in a popup\nHold [CTRL] to run code as JavaScript";
     but.onclick=function(e){  
        if(e.ctrlKey){  code="(use console to see errors and variables)<script>"+code+"<\/script>";  }
        window.open("data:text/html,"+escape((code.match(/<html/i) ? "":"<pre style='font:20px monospace;margin:1em;'>")+code)); 
     };
    
     elm.parentNode.insertBefore(but, elm);
    });

    bookmarklet href:
    Code:
    javascript: [].slice.call(document.querySelectorAll("pre.alt2")).map(function(elm){   var code=elm.textContent, but=document.createElement("button");   but.innerHTML="popup";   but.title="Click to view in a popup\nHold [CTRL] to run code as JavaScript";   but.onclick=function(e){        if(e.ctrlKey){  code="(use console to see errors and variables)<script>"+code+"<\/script>";  }      window.open("data:text/html,"+escape((code.match(/<html/i) ? "":"<pre style='font:20px monospace;margin:1em;'>")+code));    };     elm.parentNode.insertBefore(but, elm);  });
    Last edited by rnd me; 08-26-2013 at 10:57 PM.
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/5/28) IE7:0.1, IE8:5.3, IE11:8.4, IE9:3.2, IE10:3.2, FF:18.2, CH:46, SF:7.9, NON-MOUSE:32%

  2. Users who have thanked rnd me for this post:

    xelawho (08-28-2013)

  • #2
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,923
    Thanks
    56
    Thanked 548 Times in 545 Posts
    nice one, rnd me!

  • #3
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,077
    Thanks
    38
    Thanked 498 Times in 492 Posts

    Question

    I have not used, to my knowledge, a bookmarklet before.
    I have bookmarked different sites to return to them at a later time,
    but I am clueless as to how this script is to be implemented.

    Is there a brief instruction manual on how to install and use this script?

  • #4
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,297
    Thanks
    10
    Thanked 584 Times in 565 Posts
    Quote Originally Posted by jmrker View Post
    I have not used, to my knowledge, a bookmarklet before.
    I have bookmarked different sites to return to them at a later time,
    but I am clueless as to how this script is to be implemented.

    Is there a brief instruction manual on how to install and use this script?

    you can run the code in post #1 in the javascript console for an instant preview of the script's functionality.
    bookmarklets are links with javascript: urls instead of http: urls. to bookmark a link, you can drag that link to your bookmark toolbar. the same goes for javascript links.

    it's written as a tampermonkey userscript, but it should work for greasemonkey as well.


    add X-monkey to your browser, create a new userscript from the extension menu, and paste in the code shown in post #1.

    then, basically nothing happens except a small button appears above any [CODE] tags section in the forum. clicking that button does what post #1 describes.

    for greasemonkey, you can just visit this userscript file in firefox to install (once you click ok).
    you might have to add http://www.codingforums.com/showthread.php?* as an "included page" under the userscript properties behind the greasemonkey icon.

    in terms of bookmarlets, you have to realize the html below in a browser and drag the link to the bookmark toolbar. you can't press [CTRL]+[D] because you aren't bookmarking the page, you're bookmarking the script itself. i can't link to a javascript: url on this forum for security reasons. the whole thing is weird at first i know, but super handy thereafter.

    next time you can do it from the code box!

    Code:
    <a href="javascript: [].slice.call(document.querySelectorAll(&quot;pre.alt2&quot;)).map(function(elm){   var code=elm.textContent, but=document.createElement(&quot;button&quot;);   but.innerHTML=&quot;popup&quot;;   but.title=&quot;Click to view in a popup
    Hold [CTRL] to run code as JavaScript&quot;;   but.onclick=function(e){        if(e.ctrlKey){  code=&quot;(use console to see errors and variables)&lt;script&gt;&quot;+code+&quot;&lt;/script&gt;&quot;;  }      window.open(&quot;data:text/html,&quot;+escape((code.match(/&lt;html/i) ? &quot;&quot;:&quot;&lt;pre style=&quot;font:20px monospace;margin:1em;&quot;&gt;&quot;)+code));    };     elm.parentNode.insertBefore(but, elm);  });">upgrade</a>
    here is a link to a copy of the bookmarklet link. visit the page, click RUN, then drag the link in the box to your toolbar. you also might be able to add it via right-click in some browsers.

    once bookmarked, click the bookmark when viewing a codingforums thread (not a post or section), and the popup buttons will appear, just like in the userscript.

    also check out lot of useful bookmarklet sites for some really nice always free web dev tools:

    Last edited by rnd me; 08-29-2013 at 04:34 AM.
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/5/28) IE7:0.1, IE8:5.3, IE11:8.4, IE9:3.2, IE10:3.2, FF:18.2, CH:46, SF:7.9, NON-MOUSE:32%

  • #5
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,077
    Thanks
    38
    Thanked 498 Times in 492 Posts
    Thank you.

  • #6
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,923
    Thanks
    56
    Thanked 548 Times in 545 Posts

    another method...

    in Chrome, at least, and I guess this is similar elsewhere...

    navigate to any page, click on the star in the address bar. In the fields, choose a name for the bookmarklet. Paste rnd me's bookmarklet code from post #1 into the url box. Save.

    the button should appear on your bookmarks toolbar.

    Works fine as a greasemonkey script, too, BTW


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •