What is run_prettify.js? Why it is used? I have seen many developer use this from Google CDN.
I searched this in google but I did not get much info. I want to know details about it.
But, now run_prettify.js was removed by google.
So, you can use this CDN version of this cloudfare link
Waht is run_prettify.js?
A Javascript module [...] that allows syntax highlighting of source code snippets in an html page. [source]
Why it is used?
Because people want to syntax highlight source code.
run_prettify.js
Is an embeddable script that makes source-code snippets in HTML prettier.
Here you can learn how to use
run_prettify
run_prettify adds styles to code snippets so that token boundaries stand out and your readers can get the gist of your code without having to mentally perform a left-to-right parse.
You can include run_prettify as given below
<script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js"></script>
it will load the entire system and schedule the prettifier to run on page load
with the use of run_prettify our code looks great and easy readable.
See More details for how it's works
Related
I'm just starting out and there are times where I see a website's function/interaction and I'd really like to read/learn the code they used to better understand how something was done. I know there's view pagesource but it's a mess and Inspect Element is really on the HTML/CSS.
There's a tool at this website, which you can use to turn ugly minified JS code into a beautiful source to read:
https://html-cleaner.com/js/
JS is often minified making it a mess but you can use browser developer tools to prettify it. How you can do it depends on your browser. In Firefox it is an icon in Debugger under the code view. There is no way to fix minified names like Carcigenicate commented but if it's open source library like jQuery you can find the source from their git repo.
I am trying to follow the practice of compiling all my javascript files and js plugins etc into one single javascript file, which then gets included into my website. So far I have been using gulp with npm for this purpose, but I am really struggling when it comes to the point that the libraries I want to include don't work like that. For example Google Maps API. So, how can I deal with such cases ? I have been asking around and I hear that there is not a way to "include" a javascript file like you can include a php file, but is this the final answer ?
I know you can include other files with jQuery on runtime, but that way you are not avoiding the additional http calls, remember the ideal case is to call one javascript file which has all the js code you need.
Even when I am using require in javascript, the required file must have a proper format and I have to assign it to a variable bla bla bla, but when I include a script like this <script type="text/javascript" src="myjsfile.js"></script> everything is included in my scope properly.
How can I work around this ? Would it be a good practice if a javascript compiler like gulp copied the contents of all my javascript source files and pasted them into one single merged file ? Wouldn't that work the same way as calling all those files with ?
Well, I started this question because I am having troubles with the google maps api, but the problem is more general, so if you can help me please answer the above questions too. Anyway in the google maps api case, I am working with it perfectly fine when I include it like this
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=MYKEY&callback=Mycallback">
</script>
But how can I merge this into my minified way of including libraries ? I tried to use some npm libraries that integrate with google maps api (like this for example), but I am getting CORS problems and I think this is an expected behaviour.
Thanks in advance ! Sorry if something sounds stupid, I am trying to learn the good way of coding.
Decent question.
I'm not an expert but there is my subquestion/answer:
async attribute lets load html and script(s) simultaneously. If map is main feature of site, I would place <script> on top of loading html file so its not always rule to place in to the bottom of <body>.
Recently I've discovered AngularJS as mentioned in the title. After some lectures I'm trying to use this plug-in in order to obtain some dragNdrop feature for my web-page. I've downloaded the code from the git's master but nothing seems to work as planned. All the pages are filled with the AngularJS's syntax.
code result
I've tested the example on 3 different browsers but the result is always the same. The question is: what is the missing step for a correct browser-interpretation of the code? What do I need to include in the stock files given by the owner?
i'm not sure, but i think that the problem is that you're trying (according to attached screenshot) to load nested.html that is sort of "view page" (according to gihub repo), because of that there are no links to angular libs there. That's why try to include angular.js to your page or load index.html instead of nested/nested.html.
I hope my answer will help you to solve your problem.
I am relatively new to JavaScript and trying to find a way to get a good overall understanding of JavaScript projects, frameworks, etc.. For example when I look at a JavaScript based source on Github I would like a one page snapshot of the dependencies between the html, css and the various .js files requiring further js files( modules) , instead of looking at the source code tree and opening up the individual files. What I am looking for is either an object diagramming tool or something like a "file diagram".
Is there a tool out in the wild already doing this? (and ,yes I have already tried Google-ing it)
(I used to use a tool in the Windows world for tracking DLLs which is a similar concept.)
https://github.com/nodejitsu/require-analyzer gets you part of the way there.
One could also implement a file dependency analyzer if you are looking for more comprehensive html/template analysis with these two:
http://nodejs.org/docs/v0.4.8/api/fs.html#fs.readdir
http://nodejs.org/docs/v0.4.8/api/fs.html#fs.watchFile
Using Firebug you can see the files requested by each page, the server response and you can filter them by type. The HTML view lets you see the entire page including related js/css content. I don't think it's exactly what you are looking for, but I find it helpful for this sort of thing.
here are some bookmarklet code that could help (taken from https://www.squarefree.com/bookmarklets/webdevel.html
view style sheet :
javascript:s=document.getElementsByTagName('STYLE');%20ex=document.getElementsByTagName('LINK');%20d=window.open().document;%20/set%20base%20href/d.open();d.close();%20b=d.body;%20function%20trim(s){return%20s.replace(/^\s*\n/,%20'').replace(/\s*$/,%20'');%20};%20function%20iff(a,b,c){return%20b?a+b+c:'';}function%20add(h){b.appendChild(h);}%20function%20makeTag(t){return%20d.createElement(t);}%20function%20makeText(tag,text){t=makeTag(tag);t.appendChild(d.createTextNode(text));%20return%20t;}%20add(makeText('style',%20'iframe{width:100%;height:18em;border:1px%20solid;'));%20add(makeText('h3',%20d.title='Style%20sheets%20in%20'%20+%20location.href));%20for(i=0;%20i
view scripts:
javascript:s=document.getElementsByTagName('SCRIPT');%20d=window.open().document;%20/140681/d.open();d.close();%20b=d.body;%20function%20trim(s){return%20s.replace(/^\s*\n/,%20'').replace(/\s*$/,%20'');%20};%20function%20add(h){b.appendChild(h);}%20function%20makeTag(t){return%20d.createElement(t);}%20function%20makeText(tag,text){t=makeTag(tag);t.appendChild(d.createTextNode(text));%20return%20t;}%20add(makeText('style',%20'iframe{width:100%;height:18em;border:1px%20solid;'));%20add(makeText('h3',%20d.title='Scripts%20in%20'%20+%20location.href));%20for(i=0;%20i
I like the look and feel of the WordPress editor (version 2.7), and I would like to use it in another web application that is written in ASP.NET. I've used TinyMCE before, and I've even extended it in the past. However, I can't seem to get the Wordpress configuration to work!
I've downloaded the entire WordPress package and taken the TinyMCE code (from the "js" folder) and put it in my web site. It ends up giving me an error on the following line of tiny_mce.js
return f.apply(s||this,Array.prototype.slice.call(arguments,2))
'undefined' is null or not an object.
Now, I've carefully made sure that the steps of execution are identical with the WordPress demonstration site that I've based this from.
I'm not a Javascript newbie (at all), but I can't seem to figure out why this is not working. Has anybody tried to do this before? What am I missing?
A demo of what I am talking about is here (username="admin", password="demo"). View the source, I have the three parts of Javascript that are (seemingly) required to power the editor.
Something of a stab in the dark, but I'm suspecting that there's a dependency on WP's prototype.js and you didn't bring that over with TinyMCE.
If you are able to determine which bit is undefined that might give you a clue. I tried looking at the demo with firebug, but tinymce.js was all one line, so I gave up trying to find that code.
Try putting in either some console.log() if you have firebug, or alert()s before that line, and try to see what f,s,this,arguments etc are when yu get the error, then do the same thing with a vanilla WP install and see the difference?
I suggest including the tiny_mce_src.js istead of the minified version, this way you can use firebug to debug and receive helpfull information.