Displaying Source Code of HTML

Question

I'm creating a Feature Index for a website and I thought that it would be nice if the user could just click on a link to view the source code instead of using the browser developer tools. After some research I found that we can easily view the source code of the current page like this:

<a onClick='window.location="view-source:" + window.location.href'>View Source</a>

Sadly, i'm kind of a big javascript noob still and was wondering if there is a way to hyperlink to the source code of other HTML pages on the site.

Thanks

Have you tried replacing window.location.href with the URL of the files you are interested in? — Burki
– Burki, Commented Mar 4, 2015 at 12:18
Please note that the view-source protocol is blocked in several browsers — mplungjan
– mplungjan, Commented Mar 4, 2015 at 12:19
tried <a onClick='window.location="view-source:" + index.html.href'>View Source</a> .. didn't work — SuperVeetz
– SuperVeetz, Commented Mar 4, 2015 at 12:20

mplungjan · Accepted Answer · 2015-03-04 12:45:25Z

Please note that the view-source protocol is blocked in several browsers

If you need to show the source of the page and other pages on the same site, you might do something like this assuming the html is well formed - I am using jQuery to get the data by the way (note link 2-4 will not work in this demo) :

    $(function() {
      $(".codeLink").on("click", function(e) {
        e.preventDefault(); // cancel the link
        if (this.id == "thispage") {
          $("#codeOutput").html(("<html>" + $("html").html() + "</html>").replace(/</g, "&lt;"));
        } else {
          $.get($(this).prop("href"), function(data) {
            $("#codeOutput").html(data.replace(/</g, "&lt;"));
          });
        }
      });
    });

    code {
      display: block;
      white-space: pre;
      font-family: Consolas, Courier, monospace;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul>
  <li><a href="#" class="codeLink" id="thispage">Source of this page</a></li>
  <li><a href="page2.html" class="codeLink">Source of page 2</a></li>
  <li><a href="page3.html" class="codeLink">Source of page 3</a></li>
  <li><a href="page4.html" class="codeLink">Source of page 4</a></li>
  <hr/>
  <code id="codeOutput"></code>
</ul>

giorgio · Accepted Answer · 2015-03-04 12:36:58Z

1

Yeah, exactly the same as you did now: direct the user to the url with view-source: prepended to the url. Example given, view-source:http://www.stackoverflow.com will direct your visitor to the source of stackoverflow. But beware that this depends solely on the browser you are using, meaning: some users will see the source, other users might not.

And a bonus jquery to convert all source code links (with class 'source') (not tested)

<a href="page1.html" class="source">Page 1 (source)</a>
<a href="page2.html" class="source">Page 2 (source)</a>
<a href=http://www.external.com" class="source">External (source)</a>

jQuery(document).ready(function ($) {
    $('a.source').each(function() {
        $(this).attr('href', 'view-source:' + $(this).attr('href'));
    });
});

edited Mar 4, 2015 at 12:36

answered Mar 4, 2015 at 12:18

giorgio

10.2k2 gold badges30 silver badges41 bronze badges

7 Comments

SuperVeetz Over a year ago

Thank you, i will try this now. The users viewing this site will only be using chrome but yes thank you for pointing that out

SuperVeetz Over a year ago

Hmm strange, view-source:stackoverflow.com works ... but view-source:cisweb.ufv.ca/~300105626/assignment02 does not work .. maybe somethin to do with my school server?

SuperVeetz Over a year ago

view-source: etc... i need to learn how to tag code in these chats still ' body { display: block } test '

giorgio Over a year ago

what do you see? As I just see the source, when trying this: view-source:http://cisweb.ufv.ca/~300105626/assignment02/

SuperVeetz Over a year ago

fixed it !! got rid of the + window.location.href and it works now THANKS

|

praveen_programmer · Accepted Answer · 2015-03-04 12:19:22Z

1

You can use this.

<script>
function viewthesource(){
window.location="view-source:"+window.location
}
</script>

<a href="javascript:viewthesource()">View Source</a>

answered Mar 4, 2015 at 12:19

praveen_programmer

1,06212 silver badges25 bronze badges

2 Comments

praveen_programmer Over a year ago

It not work in IE, Opera and Safari due to security issue.You can create function same on this link to do this functionality. stackoverflow.com/questions/1815021/…

mplungjan Over a year ago

Also poor practice to have href="javascript:...

machinateur · Accepted Answer · 2015-03-04 12:29:06Z

0

As explained on this site, you need to append the full url to the view-source: part.

window.location = 'view-source:' + window.location;

However, it might be better to either create a plain text copy (as a .txt file) or use php to set the documents header of Content-Type to text/plain, to ensure that all users are able to use the feature, no matter what browser they're using.

edited Mar 4, 2015 at 12:29

answered Mar 4, 2015 at 12:21

machinateur

5005 silver badges10 bronze badges

Collectives™ on Stack Overflow

Displaying Source Code of HTML

4 Answers 4

Comments

7 Comments

2 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

7 Comments

2 Comments

Comments

Linked

Related