JavaScript script to enhance the source code of languages like HTML, PHP, Javascript, etc. that we display on web pages, a new Syntax Highlight.
In a previous article we saw the script, and I was curious to look for more scripts that would do the same, among other things to decide to use the one that was simpler and more optimal.
Well, searching I found this other one called Google-code-prettify. A priory it looked better than him but once I tried it I think I opted for SyntaxHighlighter.
Before continuing comparing them, we are going to see how to install and use this one. To do this, the first thing we have to do is download the . Once we have downloaded it we have to upload it to our server using FPT.
We already have the simple part of the installation, now we have to include three lines of code on each page where we want to use it. For this we will see an example:
This would be the code used. In the header would go the links to the CSS and JS of the script, and then we would have to place the prettyPrint() function in the BODY tag of our page. It is important not to forget about it, otherwise nothing would work.
Once we have this, which is common to any page, we just have to add the label
to the codes that we want to format.
In principle, the script detects the language automatically, so it is not necessary to specify it, but if we wanted to do so, the label would be something like this:
With this we already have our code finished, to see the .
In addition, I leave you the example code so that you can take a look at it.
class Voila {
public:
// voila
static const string VOILA = "Voila";// will not interfere with embedded tags.
}
As for changing styles we just have to change the line:
for example by this other one:
Note: I have not been able to adapt the default style that appears on the web. I can't find the proper CSS that the script should supply.
In its favor I have to say that it is a lightweight script, it has 3 different styles and supports most languages, it also allows you to create your own styles by modifying the already designed style sheet. We only have to add 3 lines of code to our website to make it work.
Against saying that the process of modifying the styles on the web is not very well explained. In addition to saying that the package that you download is somewhat poorly organized and if you do not look at the examples on the web, it is difficult to configure it properly.
Facebook Comments
Disqus