I'm looking for an HTML IDE (preferably free) or extension for Visual Studio Code that:
a)has a live preview feature
and
b) clicking or right-clicking an element in the live preview highlights the corresponding code.
This seems to be a bit elusive, which doesn't make a lot of sense to me considering how useful this is.
I'm currently using Visual Studio Code with the Live Preview extension, but it doesn't allow doing anything with the preview.
1, Adobe Dreamweaver, just use Split Mode.
You code yourself, just use the Editor part as a Live Preview so you won't mess-up with redundant and ugly codes.
You click on the code, and the live preview corresponding element will be highlighted, you click on the live preview, the text cursor will jump to the code.
2, Brackets
It just works exactly like what you want, but unfortunately, it is discontinued by Adobe.
3, Five servers (VSC Extension)
https://marketplace.visualstudio.com/items?itemName=yandeu.five-server
It is only one-way-highlight. You can't jump to code by clicking on Live Preview.
I haven't found any VSC extension working the way you want.
Related
Question
The editor brackets can do that. Supposed that, when I click my html tag in my source code file, the browser would automatically highlight the section/div in the broswer like google chrome developer tools.
Step 1
Click my tag in my source code file
Step 2
the live server will automatically focus on the section I want
How could I make it in VSCode?
VS Code does not have a built-in live server. Whatever extension you are using for live server can implement this, however I am not aware of any ones that do currently. Consider filing a feature request against them for this
Look at Five Server extension.
I used to love this Live Preview of Brackets, mainly for two unique features unlike many other editors and extensions:
It shows the preview live, literally. It doesn’t wait for file save to show the changes.
Highlights the section in the preview, corresponding to the html tag in which the cursor is placed currently.
I have been looking for a similar VS Code extension for a while.
Finally found it, JUST NOW.
Is HTML and CSS live preview available in Visual Studio 2015? if so, how to activate it?
if not is there any plugin for Visual Studio 2015 to use this feature?
I found a plugin in the Visual Studio Marketplace. The name of the plugin is Live HTML Previewer. Here is the link
I'm not sure if there is an out-of-the-box feature in Visual Studio to do this (I don't do much web development), but a quick Google search returned these extensions that might help you:
Live HTML Previewer
HTML Preview
Web Essentials - This one I've actually seen before, and know to be quite powerful
You could right-click on your project name and check if it offers an option for 'Page Inspector'.
If it does and you select it, it will open a panel on visual studio that shows your app as it would show in a browser with the html below in a separate section of the panel as well as a separate section for the style, etc.
Similar to what you see when you open developer tools on a browser, but with a preview included.
While you can't change the code in the panel's html section, you can make changes to your actual project files and update the preview by clicking the yellow notification bar indicating that the files have changed.
You can even expand or reduce the preview panel, and if you app is responsive, it will be responsive in the panel as well.
The Chrome "Inspect element" HTML editor is very easy to use with lots of cool features, I love the collapsible elements, highlighting, and live updates so I can see exactly what's happening. Usually when I'm writing I'll create an empty file and open it in Chrome so I can start there. Unfortunately I have to copy everything to the document whenever I want to save and if I accidentally click on a link I lose everything. Is there an extension or something I can use to save the file (Maybe even to google drive?) I've recently accidentally lost a bunch of work a couple times in a row so I need to change something. I've tried brackets, atom.io, shiftedit, and codepen but none of them have the convenience and features of Chrome's console.
Thanks
You can use the Workspaces feature to work with files from DevTools so changes will persist to your computer automatically. Works with all source file types.
Check out Snippets in Chrome DevTools. The code snippets are stored in the browser, and you can run them on any page/site. I find them very useful myself.
You see the DOM in the "Elements" panel. The page may have JS that changes the DOM Tree.
So what you see in the Elements panel is not the source HTML. Therefore you can't just change things in the elements panel and save the changes to your HTML file.
I'm using eclipse Juno EE IDE for Web Developers.
When I open .tml files, they don't show the correct highlighting and auto complete isn't working. I thought this looked just like it's opening it in a text editor. I right clicked the .tml file and clicked open with > HTML editor and I still don't get the correct highlighting.
This works perfectly on my PC at home, I am at work and it doesn't work properly. Please can someone give me a quick heads up on what setting is wrong? I've spent ages looking and trying different editors, but i'm sure it should just work in the html editor.
Thanks,
Edit: When I hover over the underlined closing html tag, it says "The word is not spelt correctly". It's like it's a text editor, only I did right click > open with html editor.
(If not using Tapestry Tools, as uklance mentioned)
Remember that in addition to editing Eclipse's File Association configuration in:
Window->Preferences->General->Editors->File Associations
you should add the *.tml extension in the Content Types configuration in:
Window->Preferences->General->Content Types
there you should chose html or xml and click add to add *.tml
Have you seen the Tapestry Tools eclipse plugin?
Or you can just add a file association for *.tml to the XML or HTML editors.
Another alternative is using the JSP editor and a custom tld
I have installed the latest version of netbeans and its working.. I have opened an html file but i don't see where i can preview it..
Does it support HTML preview inside the IDE?
Do i need a plugin?
I would like to view in design mode at least so i can design in the ide ...
All i see is pure html ...
any ideas?
thanks
Download NetBeans for PHP, open an HTML file and you will see
I don't believe this feature is in Netbeans as of 6.7 I'm afraid. There is CSS preview, but I assume that falls short of the full preview you require. You can preview it directly in the browser by selecting "view" in the context menu, but that again is nowhere near the full preview which you require.
Searching plugins.netbeans.org also proves fruitless.
"Web Preview" and "Embedded Browser UI - XUL Runner" solution is only working at Windows systems. My solution is using an external HTML WYSIWYG Editor for Mac OS X. There are some nice free/open source HTML interface builders:
http://www.kompozer.net/
http://ckeditor.com/
http://www.w3.org/Amaya/
Alternatively you can use HTML palette + Netbeans HTML Source editor. Click Window + Palette. At the right hand side palette will be opened which contains basic HTML elements. You can drag & drop elements to your source code as visual designers but it only creates code. This function can also help you for some basic tasks.