Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to format code in html / css / js/ php

I'm looking for a way to automatically format and color code I write in an HTML document. I know wikipedia does it, for example on the page: http://en.wikipedia.org/wiki/Nested_function

I'm sure there are libraries out there to do this, but I can't for the life of me, find one. Does anyone have any suggestions?

like image 640
B T Avatar asked Aug 13 '09 05:08

B T


People also ask

How do I format my HTML code?

To improve the formatting of your HTML source code, you can use the Format Document command Ctrl+Shift+I to format the entire file or Format Selection Ctrl+K Ctrl+F to just format the selected text.

How do I format a PHP file?

The editor provides the document formatting feature for PHP documents. Right click the editor area and choose Format Document . In order to format the document, it must be syntax-error free. The code formatting normalizes whitespaces, line endings, opening and closing braces, indentation and pretty print spaces.

How do I code HTML CSS and JavaScript together?

To link a CSS file with your HTML file, you have to write the next script on your HTML file inside the head tag. To link a Js file with your HTML, you only have to add the source of the script inside the body tag or outside; it doesn't matter.

What is HTML CSS JavaScript PHP?

HTML stands for Hyper Text Markup Language, CSS for Cascading Style Sheets, and PHP for PHP Hypertext Preprocessor. (Yes, the acronym is recursive.


1 Answers

Have a look at the Prettify JavaScript library. It's the one generally used by people (it's the one being used here on SO, for example.)

You would use it like this:

In your <head> element:

<link href="prettify.css" type="text/css" rel="stylesheet" /> <script type="text/javascript" src="prettify.js"></script> 

In your <body> element:

<body onload="prettyPrint()">   <!-- any HTML you like here... -->   <pre class="prettyprint"> def say_hi():     print("Hello World!")   </pre>   <!-- any HTML you like here... --> </body> 

That's for simple use of the library. If you're using other JavaScript on your page I would recommend other methods for enabling the Prettify library (i.e., don't use the onload attribute of the <body> element.) For example, if you're using jQuery, I wrote this jQuery plugin that I usually use to syntax highlight certain elements:

// Extend jQuery functionality to support prettify as a prettify() method. jQuery.fn.prettify = function () { this.html(prettyPrintOne(this.html())); }; 

Used like this:

$('#my-code-element').prettify(); 
like image 101
Blixt Avatar answered Sep 24 '22 10:09

Blixt