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

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();

Format code command for PHP/HTML in Visual Studio Code

Update 2021-07-21

It's been more than half a decade since I first wrote this answer. The extensions to which I originally linked are abandoned, and Visual Studio Code's intrinsic PHP support hasn't improved, which is disappointing. The only decent extension still standing of which I'm aware is PHP Intelephense, which uses a freemium model: basic features are free, and a lifetime license is $12 USD as of writing.

The free version of Intelephense supports code formatting with the usual shortcuts (Alt + Shift + F on Windows and Linux, ⌥⇧F on macOS). Visual Studio Code continues to lack built-in support for PHP code formatting and will direct you to the extension marketplace if you attempt to format PHP without an appropriate extension installed.

Original answer

Visual Studio Code has pretty awesome PHP support. What it lacks is covered by extensions. A quick search reveals at least three (1, 2, and 3) that claim to support PHP formatting.

They mostly seem to use the standard shortcut of Alt + Shift + F on Windows/Linux, with varying shortcuts on Mac. If you're on Mac, give ⌥⇧F a try.

How to proper format/indent HTML and PHP Code in Sublime Text 3

Thanks a lot for your answer, but i found a nice, built in approach of sublime text. Just select everything (CTRL + a (Windows) or CMD + a (Mac) and click this in the menu

Edit → Line → Reindent

maybe this helps also others

EDIT(2017): You can also use key combination (without need for mouse)

CTRL + SHIFT + P (Windows)
CMD + SHIFT + P (Mac)

then type 'Reindent' and select the fist option 'Indentation: Reindent Lines'

How can I format PHP files with HTML markup in Visual Studio Code?

The extension Beautify (from HookyQR) just does it very well. Either add PHP, and any other file extension type, to the configuration. As said by Nico, here is an example:

Go to user settings (Ctrl + Shift + P → User settings (UI) or Ctrl + , (comma)
Search for Beautify in the field above. And click on "Edit in settings.json" for "Beautify: Config".
For the "html" section, add "php" and "blade".

###Usage

You can invoke it directly. Press F1, and then write Beautify. The auto completion gives you two choices, "Beautify file" and "Beautify selection". Choose the one you need, and it will do the job. That's a straightforward direct way.

Sample Image

You can also add a keybinding to have a keyboard shortcut. Here is how to do it:

Open keybindings.json (go to menu File → Preferences → Keyboard Shortcuts)
Click in the above. Open and edit file keybindings.json
Add the following into the closed brackets, []
```
{
       "key": "alt+b",
       "command": "HookyQR.beautify",
       "when": "editorFocus"
}
```
Choose any key you want, and make sure you don't override an existing one. Search first in the left side if it exists or not.

Note that all of those things are well documented in the description of the extension.

Extra: Note about blade

(suite to @Peter Mortensen clarification pinpoint)

blade or blade.php

If you are confused if it's blade or blade.php for the setting! I'll clear it up for you! It's blade! That's vscode keyword for the language!

How do you know ?

First if you open the list of languages as by the image bellow:

Sample Image

Write blade

Sample Image

You can see Laravel Blade (blade)! The language keyword is in the paratheses! blade!

Well but how to check!

Try with blade.php in the settings!

Sample Image

Try to beautify

Sample Image

You'll get an asking context menu for what language (html, css, js)!

Sample Image

So it doesn't works!

To really know ! Put back blade!
And it will work and beautify directly!

How well it works with blade

The awesome answer to that! Is try it, and see for yourself!

But if you ask me! I'll say it does work as with html! It can be too handy! And you may need to fix some lines! Depending on your expectations and your style!

Here an illustration! I screwed the indentation in purpose

Sample Image

And here the beautification result:

Sample Image

how to integrate 3 language (html,javascript,css) proper php format to put in function.php file

You can use use nowdoc in PHP to achieve this. Try this

function somefunction(){
    return <<<'EOD'
        <style type="text/css">
            #repel {
                position: fixed;
                top: -850px;
                right: 0px;
            }

            .repel {
                -webkit-animation: repel 1s;
                animation: repel 1s;
            }

            .climb {
                -webkit-animation: climb 1s;
                animation: climb 1s;
            }

            @keyframes climb {
                0% {
                    transform: translatey(0px);
                }

                50% {
                    transform: translatey(-25px);
                }

                100% {
                    transform: translatey(0px);
                }
            }

            @keyframes repel {
                0% {
                    transform-origin: top right;
                    transform: rotate(0deg);
                }

                50% {
                    transform-origin: top right;
                    transform: rotate(2.5deg)skewy(-5deg);
                }

                100% {
                    transform-origin: top right;
                    transform: rotate(0deg);
                }
            }
        </style>
        <img id="repel" src="http://s3.amazonaws.com/dfc_attachments/images/3246705/Repel.png" />
        <script type="text/javascript">
            (function() {
                var previousScroll = 0;

                $(window).scroll(function(){
                    var currentScroll = $(this).scrollTop();
                    if(currentScroll > previousScroll){
                        //down scroll code
                        $("#repel").addClass("repel");
                        $("#repel").on('animationend webkitAnimationEnd oanimationend MSAnimationEnd', function() {
                            $('#repel').removeClass('repel');
                        });
                    }else{
                        // upscroll code
                        $("#repel").addClass("climb");
                        $("#repel").on('animationend webkitAnimationEnd oanimationend MSAnimationEnd', function() {
                            $('#repel').removeClass('climb');
                        });
                    }
                    previousScroll = currentScroll;
                });
            }());
        </script>
EOD;
}

Then you use it like this

<?php echo somefunction(); ?>

pretty formatted code doesn't break into new lines

You're missing the http: or https: part of the URL - currently, your file links look like this:

//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/highlight.min.js

//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/styles/default.min.css">

Change your links to look like this:

<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/styles/default.min.css"><script src="http://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/highlight.min.js"></script>

How can I display and format HTML code within the page?

Is this what you mean?

<textarea><script id="ff">gdgdgs</script></textarea>

Look up HTML entities.

HTML code formatting in phpDesigner IDE version 7.0

In PHP Desinger 7:

CTRL + SHIFT + F1 or
'PHP' menu > 'Code Beutifier for PHP'

Note: this helps in formatting PHP code, won't help for HTML or css or SCRIPT in well-format

In PHP Desinger 8 :

PHP Desinger 8 has the features for them as well.
Visit this link for more detail of PHP designer 8.

How to Format Code in HTML/CSS/Js/ PHP

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

Format code command for PHP/HTML in Visual Studio Code

Update 2021-07-21

Original answer

How to proper format/indent HTML and PHP Code in Sublime Text 3

How can I format PHP files with HTML markup in Visual Studio Code?

Extra: Note about blade

blade or blade.php

How well it works with blade

how to integrate 3 language (html,javascript,css) proper php format to put in function.php file

pretty formatted code doesn't break into new lines

How can I display and format HTML code within the page?

HTML code formatting in phpDesigner IDE version 7.0

Related Topics

Leave a reply