Surround selection with html tag - html

Is there any eclipse shortcut/trick/plugin/whatever that will allow me to select a section of text and surround it with an arbitrary html/xml tag when using the html editor.
Something like this textmate video

EDIT: not sure If my Eclipse setup is the same as yours, but...
I have the HTML Editor installed, and if I switch to the Java perspective, I can use Edit -> Quick Fix and then choose Surround with new element to get exactly the effect in your video. (On a Mac, the shortcut for this is ⌘1).
Hope this is helpful.
In the C++ editor, you can try Source -> Surround With... -> Configure Templates to add the tag you want.

The following works and allows for entering random/arbitrary tags:
Select the desired text that you want wrap.
Go to 'Edit > Quick Fix' or press 'Ctrl + 1'.
In the new menu that appears select 'Surround with new element'
However there is an annoyance, please upvote Bug 494169

Related

What is the equivalent Atom Indent Guides like in Brackets?

What is the equivalent Atom Indent Guides like the one Bracket has showing vertical lines connecting matching beginning/opening and ending/closing brackets or keywords?
Atom supports "Indent Guides" and even names it the same, you can access the configuration by choosing Settings View: Open from the Command Palette
or by pressing Ctrl-, (Control + Comma). Scroll about two-thirds of the way down and there is a checkbox to toggle the Indent Guide on or off:
When enabled they look like this in the editor:
Also found an "improved" package in Atom if Atom's indent-guide isn't cutting it.
https://atom.io/packages/indent-guide-improved
Repo seems to be updated.
UPDATE: show indent guide option is now under Editor tab, in settings.
Screenshot:
Haha. I encountered this issue today too. If I understand your question correctly, you want to know how to enable this feature?
Go to preferences/settings and then scroll down and check 'show indent guide'.
Example

Auto Completion Closing tags in html notepad++

I have just started using notepad++. I wanted to know if there is a way to create a closing tag automatically in HTML, For example:
If I type:
<body>
It will close the tag automatically:
</body>
I tried to adjust the Settings/Preferences/Auto-Completion, And I enabled the HTML/XML close tags, but that didn't work, Does anyone have a solution?
Thanks.
I thing that You looking for plugin TextFX Settings. To enable it go into menu:
TextFX -> TextFX Settings -> chek option 'auto close XHTML tags'
If You don't have installed this plugin, do this:
Click Plugins -> Plugin Manager -> Show Plugin Manager
On the 'available' find and select 'TextFX Characters'
Click Install and restart Notepad++
Enable the 'auto close XHTM tags' as described above.
And do not forget to set the type of document to HTML.
If you have done everything listed, and it still doesn't work. Try going to the "Language" (next to the settings part) and turn html on. This was the problem for me. Now it works fine for my with the autocomplete.
As fas as I remember (when I used windows machine), there was common problem with html tags.
Try to uncheck all checkboxes in Preferences when on the list (on the left side).
Next, hit close.
Then open it again and check only html/xml close tag checkbox.
In my case it helps.
This question is exactly answered by Noha Kareem, here:
Auto close of html tags and php tags in notepad++ and a semicolon at the end of php lines.
I hope this helps

Better HTML/Razor Formatting in VS 2010 (one Attribute per Line)?

Does anyone know how i can get better formatting for Razor/HTML (with CTRL K+D or another Shortcut) ?
I want it to be nicely intended, every tag be in a new line, every attribute inside a tag should also get a new line.
Tools -> Options -> TextEditor -> HTML does not give these options no matter how configure it.
I also could not find an extension to do this.
Resharper has some nice options for organising your code
EDIT: although it looks like there isn't a lot of support for HTML formatting more for the C#/VB code side of things

How to use hotkey in notepad++ webedit plugin?

How to use hotkey in notepad++ webedit plugin?
what are the keyboard shortcuts to press to insert html tags??
Install the "webedit" plugin. Which will allow you to add custom shortcuts.
(Plugins > plugin manager).
After the program restarts, go to plugins > webedit > edit config. And either change an existing one or add a new one, (example &A= | ). You can remove the shortcut icons if they annoy you.
Then you go to, settings, shortcut mapper. Right now, ctl+enter is set to word completion I believe. Change that to something else (on main menu). Then go to the plugin commands tab and find your command and set it to ctl+enter. Then restart, and it should work.
http://www.graphicdesignforum.com/forum/showthread.php?t=52719
All keyboard shortcuts can be assigned/modified using the standard Shortcut Mapper. For more information see the WebEdit.txt help file.
That's what it says in the plugin description, at least.
Setting>Keyboard Shorcut>Plugins commands
then go to
- WebEdit - A
- WebEdit - Div Class
- WebEdit [...]
and select shortcut
I see that someone sort of answered it but I have a few things to add.
When you install WebEdit, go to the config as stated.
Go down to the [Tags] section.
Underneath all the comments, add the shortcut you want.
Here is the syntax:
<Tag>=<Replacement>
For tag, put what you want to replace. For example 'h1' (dont use the carrots).
put the = sign.
Then for replacement, put what you want "h1" to be replaced with.
Here is an example of my h1 hotkey:
h1=<h1>|</h1>
What the pipe character does is tell npp where to put your cursor after the replacement.
So this is how you use it now:
type h1, then press 'Alt+Enter'(by default, you can change this too), then BAM, your 'h1' will be replaced with:
<h1></h1> and your cursor will be sitting between the tags.
You could also do h1=<h1>|\n</h1> which would print the same thing but with a line break.
You can do some pretty awesome stuff with it. Saved me SO much time once I got used to it. I never type without it anymore lol.
Here is what my personal setup looks like under the [Tags] section (and I commented everything below starting with the m=module because it was messing with my 'p' tag and I didn't care anyways.
begin=<!DOCTYPE html>\n<html>\n<head>\n</head>\n<body>\n\n|</body>\n</html>
h1=<h1>|</h1>
h2=<h2>|</h2>
h3=<h3>|</h3>
h4=<h4>|</h4>
h5=<h5>|</h5>
h6=<h6>|</h6>
html=<html>\n|\n</html>
script=<script type="text/javascript">\n\t\n</script>
link=<link rel="stylesheet" type="text/css" href="|">
a=
div=<div>
divclass=<div class="|">
divid=<div id="|">
divend=</div>
p=<p>|</p>
ul=<ul>\n\t|\n</ul>
li=<li>|</li>
header=<header>\n\t|\n</header>
nav=<nav>\n\t|\n</nav>
section=<section>\n\t|\n</section>
article=<article>\n\t|\n</article>
aside=<aside>\n\t|\n</aside>
footer=<footer>\n\t|\n</footer>
Remember one thing; after you edit the WebEdit, you have to restart NPP before the new tag will work.
I know this is a bit old, but you can use the Emmet plugin to speedup your HTML and CSS typing. you can customize your snippets to make any text.
It cames whith dozens of snippets already, you just have to type it and then hit Ctrl+Alt+Enter.
You can find the file to edit in this path:
C:\Program Files (x86)\Notepad++\plugins\EmmetNPP\emmet\snippets.json
It's easy to spot what you have to do.
On the plug-ins menu you will find all options that this plugin offers.
Experiment it like typing html:5 and then hit Ctrl+Alt+Enter.
Or even this ul>li*4>a[href=page.php?id=$]{page $}.
You will be amezed.
Check this online documentation for keyboard & mouse shortcuts

Is it possible to auto-format your code in Dreamweaver?

Is it possible to auto-format your code in Dreamweaver like in Visual Studio (ctrl+k+d)
A quick Google search turns up these two possibilities:
Commands > Apply Formatting
Commands > Clean up HTML
Commands > Apply Source Formatting.
Works a treat.
For the 2017 CC release this has been moved (after many years of habit development). Find it now at:
Edit > Code > Apply Source Formatting.
It may be prudent to set up a keyboard shortcut if this is something you'll need regularly.
Edit > Keyboard Shortcuts
Following works perfectly for me:
-*click on COMMAND and click on APPLY SOURCE FORMATTING
- *And click on Clean Up HTML
Thank you PEKA
This is the only thing I've found for JavaScript formatting in Dreamweaver. Not many options, but it seems to work well.
JavaScript source format extension for dreamweaver: Adobe CFusion
I tried some of the sources online and finally, the below selection works fine for me (Dreamweaver on Mac). For versions above Adobe Dreamweaver CC 2017 and above:
Adobe says:
Edit > Code > Apply Source Formatting
Moreover, full documentation with other supporting information for tasks such as setting defaults, etc. on https://helpx.adobe.com/dreamweaver/using/format-code.html.
And for JavaScript source format you can use Dreamweaver JavaScript source formatting extension.(available on adobe)
Auto formatting can be done by
Select View > Code View Options
Click the View Options button in the toolbar at the top of Code view or the Code inspector.
Auto Indent Makes your code indent automatically when you press Enter while writing code.
source
Please use shortcut key alt+c+a
Please click on "edit" -> then keyboard shortcuts. It`s straight forward from there. Just select the command from the list, and press the + button.
You will need to create a duplicate set, then select it again from the list. And finally set a keyboard shortcut!
Now, before saving, press the shortcut you just created!
Coding toolbar (Edit > Toolbars > Coding) and select Code Format Settings to set your preferred formatting.
You can also access the formatting option from Commands > Apply Source Formatting or only apply it to a select block of code by selecting the Apply Source Formatting to Selection option.
http://www.hongkiat.com/blog/10-useful-dreamweaver-tips-for-beginners/
ctrl+a->(click)commands->cleanup word HTML