HTML-Kit Tools update 20120202 is now available to all registered users.

• Alt+Insert keyboard shortcut for quickly inserting tags, wrapping the selected text with a tag, and easily including CLASS and ID attributes.
• Saving files takes less time, even when file versioning feature is enabled.
• FTP speed optimizations help with opening and saving remote files faster.
• ISO-8859-2 character encoding for supporting Central European languages.

Here's a quick demo of Alt+Insert feature:

This feature was delivered in HTML-Kit Tools update 20120202. To make sure that you have the latest additions, select "Help > Check for Updates" from the main menu.

Want a quick way to type a tag, without typing all those less than and greater than characters? And without having to type the closing tag? Try Alt+Insert keyboard shortcut.

Here's a quick video demonstration of this feature:

In the simplest form, you can press Alt+Insert and type the name of a tag to insert that tag at the caret. No selection is necessary.

Press Alt+Insert, type "p" without quotes and press Enter to get the following. The caret is automatically placed in between opening and closing tags.

<p>|</p>

If you had selected some text before pressing Alt+Insert, the paragraph tag would have surrounded the text. Note that "|" represents where the caret would be placed.

<p>selected text</p>|

How about with some attributes. Typing this:

a href="about.html"

would insert the following. As you see, you can manually type in attributes.

<a href="about.html">|</a>

Alt+Insert provides even quicker ways to insert CLASS and ID -- two of the most commonly used attributes. After pressing Alt+Insert, type a tag name followed by "#" character (without quotes and no spaces). Now you can type the actual ID to quickly add an id="name" attribute. For example:

div#menubar

becomes:

<div id="menubar">|</div>

The same applies to the CLASS attribute, except the separator character is "." (period character). After pressing Alt+Insert, type a tag name followed by "." character (without quotes and no spaces). Now you can type a class name to quickly add a class="class name" attribute:

span.label

Becomes:

<span class="label">|</span>

Want to add more than one class name? Try:

span.label.info

to get:

<span class="label info">|</span>

Can you guess what this would turn in to?

button.xlarge.active tabindex="2"

There are many ways to stay in the loop but if you prefer to get an email or a RSS notification when there's an HTML-Kit update, now you can.

There's now a Google Groups announcements-only mailing list that covers:

• HTML-Kit Tools updates
• HTML-Kit TreeHouse build notices
• HTML-Kit 292 updates
• And other HTML-Kit related announcements

This is a low traffic mailing list, and email sent through this list will have "[html-kit]" in the subject line to make it easier for you to filter or label it.

Subscribe to HTML-Kit Updates

Email:

Visit this group

So you have a block of text that you want to replace and it has more than one line.

HTML-Kit Tools : Finding and replacing multi-line text in the current document

Let's start with the quick solution. If you're using HTML-Kit Tools, one of the options on "Edit > Replace" menu is a dialog for finding and replacing multi-line text. Simply paste or enter the text you're looking for and start replacing.

HTML-Kit Tools : Finding and replacing multi-line text in multiple files

Multi-line support is also in batch find and batch replace functions in HTML-Kit Tools:

1. Open a project from "File > Projects" menu
2. Inside the project window, select a folder where you'd like to start searching
3. Right click (the selected folder), and pick "Batch Actions > Find in Files" from the pop-up menu
4. You'll see a find field that allows for multiple lines

That's HTML-Kit Tools, which had the luxury of following HTML-Kit 292 and learning the few things along the way.

HTML-Kit 292 : Finding and replacing multi-line text in the current document

Finding (and replacing) mult-line text is a little tricky in HTML-Kit 292, but not impossible.

To find a block of text in the current document:

1. Press Ctrl+F
2. Click "..." next to the "Find what" field
3. Paste or enter multi-line text, and click OK
4. Click "Find Next" to start searching

That wasn't too bad, was it?

HTML-Kit 292 : Finding multi-line text in multiple files

Let's try searching for a block of text, with many lines, in multiple files and folders:

1. If you haven't already, install Ciaran's excellent cmBatchFind plugin. This adds batch search capability to HTML-Kit 292.
2. Select "Actions > Batch Actions > Find Text" from the main menu

As you see, the "Search Expression" field only accepts a single line of text. It is however possible to convert a block of text into a single-line regex expression and use that as the search expression. Or, you can use the following multi-line text to single-line regex converter:

When working with the cmBatchFind plugin:

1. Copy the single-line regular expression you've generated for the find text, and paste it in "Search Expression" field.
2. Add "r" (without quotes) to "Options" field.
3. Finally, click "Start" to begin batch search.

HTML-Kit 292 : Replacing multi-line text in multiple files

The Search Expression generated above also works with cmBatchReplace plugin. However, the "Replace With" text has to be formatted to include new lines and escape "\" characters. Here's a converter for generating a single-line "Replace With" text:

When working with the cmBatchReplace plugin:

1. Copy the single-line regular expression you've generated for the find text, and paste it in "Search Expression" field.
2. Copy the single-line replace text you've generated, and paste it in "Replace With" field.
3. Add "r" (without quotes) to "Options" field.
4. Finally, click "Start" to begin batch replace.

If you've been using HTML-Kit since the early days and if you've posted questions, chances are, you've visited HTML-Kit newsgroups.

In short:

• If you're using your web browser to read and post messages on HTML-Kit support forums, the forums interface has changed but you don't have to change anything.
• If you're using a NNTP newsreader to read and post messages to HTML-Kit newsgroups, the newsgroup names have changed to htmlkit.editor.tools and htmlkit.editor.292. Also please make sure that you're using news.html-kit.com as the NNTP news server name. All other server names will stop working in the next 30 days.

And if you want the long version...

HTML-Kit newsgroups are where new releases are announced first. It's where discussion, and occasionally arguments, happen over new features and the direction of HTML-Kit. If you've been reading it long enough, I think you'd agree that it's one of the nicest newsgroups around. That's of course because of the friendly folks who answer questions and help out new comers.

Newsgroups require a separate program, generally outside of the browser, to read and post messages. As more and more services moved into the browser itself, including email, the popularity of newsgroups have declined as a way of getting help. Most websites, virtually all popular sites in fact, now use web-based forums for tech support instead of newsgroups. Again, the primary advantage is that anyone can access these forums through a regular browser without having to install special software.

In order to make HTML-Kit support easily accessible to everyone, HTML-Kit newsgroups have been accessible through a secondary web-browser based interface specially designed for this purpose. Unfortunately though, this in-house developed interface had not kept up with rest of the site.

Having said all that, I know that a lot of you still prefer to read HTML-Kit happenings through its newsgroups. So do I. And the newsgroups are staying.

To simplify things a bit though, and as a part of modernizing the web-based interface, the names of newsgroups have been changed (please see above for details).

If you've been using the web-based interface to view HTML-Kit support forums, you can keep reading the forums through the browser as usual.

See you on the forums.

If you're using HTML-Kit 292 and if it doesn't contain the latest HTML Tidy and HTML5 updates, you may get a new notification on "Help | Check for Updates" dialog.

This update notification applies to HTML-Kit 292 installers downloaded prior to 12-Jan-2012.

So what's in this update? The latest HTML Tidy for checking errors in HTML documents, initial support for HTML5, and improved internal preview window. You can read more about these updates here.

This update is recommended for all HTML-Kit 292 users as it brings improved error checking for HTML5 documents and also enables better support for previewing modern web pages. The setup program can be run on top of current installations of HTML-Kit 292.

Download HTML-Kit 292 with 12-Jan-2012 updates

If you're using HTML-Kit Tools, these updates are already in the recent versions of HTML-Kit Tools.

If you spend a lot of time writing blog entries, news releases, how-to articles and other text-rich webpages, you may not always want to manually format text into HTML. HTML-Kit Tools can help streamline those cases with its support for styling text in Markdown format, which is a widely-used and human readable text format.

Let's jump in with a quick example of what your text might look like:

You can then preview what it looks like as a fully formatted HTML page:

Once you've completed entering text, it can be converted to valid HTML with a single-click:

Looks interesting? It's quite easy to go from text to preview to HTML. Here's how:

• Select "File > New > HTML document from plain text" from HTML-Kit Tools main menu.
• Type the text as you would normally as shown in the template.
• To preview, simply press F12 or click "Preview" as usual.
• When you're ready to convert the text to HTML, click "Open as HTML" link at the bottom of the editor window.

As you see, this feature makes it easy to write naturally and format text without using HTML tags. And then quickly convert it to well-formed HTML.

This feature was delivered in HTML-Kit Tools update 20110721. To make sure that you have the latest additions, select "Help > Check for Updates" from the main menu.

I'm a big fan of HTML Tidy. If you're new to HTML Tidy, it's a popular utility for checking HTML documents for common mistakes. It can also present an improved version of the markup, and help make older pages standards compliant. HTML Tidy was originally written by Dave Raggett and now being maintained by a quorum of developers.

HTML-Kit has continued its support for HTML Tidy, since being the first graphical user inteface for it, and have released HTML Tidy updates for both HTML-Kit Tools and HTML-Kit 292.

But what if you don't use HTML-Kit, or just need a quick way to check if a page has any errors without opening another application?

HTML Tidy Browser Extension for the Chrome browser fills in this gap by making it easy to check the current page for HTML coding errors. Once the extension is installed, all you have to do is go to the page in question and click the Tidy icon.

• Easy to use: Simply click the drop-down icon to view what Tidy finds and suggests.
• Fast: HTML Tidy is built into the extension and runs at the speed of your computer.
• Self contained: HTML is checked locally, and doesn't go through an online HTML validation service.
• Compare HTML: Displays the page source and the HTML suggested by HTML Tidy. A third view highlights any differences between the two.
• Checks the final output: If your pages use server-side scripting, this extension can help test HTML as the browser sees it.

So the next time a new client ask you to check their old site for errors, you can simply open up the URL and run it through Tidy.

• Download HTML Tidy Browser Extension
• Download HTML-Kit Tools with HTML Tidy, or get the update
• Download HTML-Kit 292 with HTML Tidy, or get the update

If you've been using HTML-Kit for a while, you know that HTML-Kit Tools is the latest version of HTML-Kit.

HTML-Kit 292 is the version before Tools, but a lot of people still use it as their primary HTML editor.

If you're using HTML-Kit 292, some of its plugins have been updated to include the following:

• Latest HTML Tidy plugin with improved support for HTML 5.
• Internal preview window with greater HTML 5 comparability.
• HTML 5 doctypes on Document tab.

HTML Tidy now checks for new elements in the latest HTML specification, including article, audio, canvas, footer, header, nav, rp, rt, ruby, section and video. New attributes that are checked include custom data-* attributes, contenteditable, contextmenu, draggable, dropzone, hidden, spellcheck, and the many form and event attributes introduced in HTML version 5.

Most of these new tags and attributes are also supported in the internal preview window for more easily testing HTML 5 pages.

These improvements were made by updating some of the core plugins that come with HTML-Kit 292. Please note that since this is not an update to HTML-Kit 292 main application itself, the "Help | Check for Updates" option won't show this as a version upgrade.

You can get HTML-Kit 292 with these updated core plugins from the download page.

If you're using HTML-Kit Tools, make sure that you have the latest update to get these features.

HTML-Kit Tools update 20111216 is now available to all registered users.

• Improved support for checking HTML5 documents for errors. Supports new tags such as article, audio, canvas, footer, header, nav, rp, rt, ruby, section and video. Also checks for new attributes including custom data-* attributes, contenteditable, contextmenu, draggable, dropzone, hidden, spellcheck, and the many form and event attributes introduced in HTML version 5. To check HTML 5 documents (and other versions of HTML/XHTML), press F9 or select "Tools > Tidy" from the main menu.
• Redesigned full screen mode now makes more space available for editing and minimizes on screen distractions. To enter full screen mode, press F11 key or select "View > Full screen" from the main menu.
• Newsfeed and update icons were moved to the left hand side of the menu bar for easily access.

This feature was delivered in HTML-Kit Tools update 20111216. To make sure that you have the latest additions, select "Help > Check for Updates" from the main menu.

Going as far back as the debut version, HTML-Kit had provided a built-in option for catching errors in HTML documents. This was made possible with the help of the excellent HTML Tidy utility written by Dave Raggett. In fact, HTML-Kit was the first program to provide a graphical user interface for HTML Tidy.

HTML Tidy is keeping up with the times by improving support for HTML5 and so is HTML-Kit Tools.

To check your HTML 5 documents, as well as older versions of HTML and XHTML documents, open them in HTML-Kit Tools and press F9 key. Alternatively, you can click the Tidy tab at the bottom of editor windows for a comparison (diff) of the original HTML code and the code suggested by HTML Tidy. Configuration and other options such as beautifying HTML are located on the main menu under "Tools > Tidy".

Improved HTML5 support checks for new elements in the latest HTML specification, including article, audio, canvas, footer, header, nav, rp, rt, ruby, section and video. New attributes that are checked include custom data-* attributes, contenteditable, contextmenu, draggable, dropzone, hidden, spellcheck, and the many form and event attributes introduced in HTML version 5.

This feature was delivered in HTML-Kit Tools update 20111216. To make sure that you have the latest additions, select "Help > Check for Updates" from the main menu.

Want more screen space and less distraction for editing those long files?

Full screen mode (F11 key) now gives you a fuller full screen view, filling up your display including the area used by the Windows Taskbar. The previous versions of HTML-Kit Tools didn't use the Windows Taskbar area. Pressing F11 again switches the editor back to the default view.

Here's a screenshot of the default view:

This is what you'll get when you enter the full screen mode:

This feature was delivered in HTML-Kit Tools update 20111209. To make sure that you have the latest additions, select "Help > Check for Updates" from the main menu.

You can already find as you type, using incremental search feature in HTML-Kit Tools.

This latest update makes it possible to instantly find STYLEs, IDs, JavaScript events, CLASSes and more, while skipping rest of the document. All within the familiar Ctrl+F dialog.

Sometimes it's easier to show than tell:

Today I'm excited to announce the new Image Picker for HTML-Kit Tools. It's a brand new design that makes it easier to get to your images, even if you have lots of them in multiple folders.

Open Image Picker with a single click on the menu bar

So if you're using HTML-Kit Tools 20111001 or later and haven't seen the new Image Picker yet, click the picture icon on the top right hand corner.

Hover for a bigger preview

One of the first things you'll notice is how much more room there is to preview your images. Whether they're small *.gif files, *.ico favicons, alpha-blended *.png files or high resolution *.jpg pictures, your images come into focus in useful and eye pleasing views.

You can get a better look at an image by holding the mouse over its thumbnail.

View it with light, dark and patterned backgrounds

In cases where an image has to be tested against a light or a drak background, Image Picker will preview the current image with white and black backgrounds.

It can also preview the image against a checkered pattern when you hold the mouse over a thumbnail for a few seconds, so you could quickly check if an image has a transparent or alpha-blended background before inserting into a page.

Browse dozens, hundreds or thousands of images

If you have a large number of images in a single folder, Image Picker can scale up from browsing dozens of images to hundreds:

Or even thousands, by breaking up the number of displayed images into multiple tabs of manageable size:

Jumping to folders is easy too

When you go to the Image Picker after opening HTML-Kit Tools, it'll display a list of images in the current document folder.

You can easily go up the folder level with a single click. If you have a couple of sub folders within the images folder, looking inside them is also as easy as clicking the folder name.

Of course, changing into any other folder is also possible with the Look In option.

Small, large and labeled thumbnails

Depending on the type and average size of images you're previewing, you may want a smaller or a larger thumbnail size.

Click the thumbnail size icon to change thumbnails to small, large without file name or large with file name.

Here's the large thumbnail view without labels:

And large thumbnails with file name labels:

Insert IMG tags or customize it

The Image Picker inserts <img /> tags with automatically calculated width, height and alt attributes. The alt attribute can be customized to insert file size, image dimensions and file name, in any order.

If you're working in CSS, JavaScript or other scripting language, you can customize the inserted code. For example, to the CSS format url(image.png)

Unusual placement, faster access

Wondering why the Image Picker icon is on the far corner of the main menu? This placement makes good use of wide screen displays by previewing images in one corner while freeing up the other corner of the screen to glance at the HTML page you're working on. Having the icon on the main menu, instead of the Actions Bar, means that you can quickly bring up the Image Picker regardless of the currently open tab. Or even if you've toggled off the Actions Bar (F11 key or "View > Actions Bar > View/Hide").

Upcoming HTML-Kit Tools updates will bring other ways to get to the Image Picker. Feel free to send your feedback if you have a particular preference.

Thank you TreeHouse!

As is the case with most new HTML-Kit features, Image Picker first appeared in HTML-Kit TreeHouse builds. These are test versions of HTML-Kit Tools that come before a general release. Special thanks go to everyone who played with early versions of the Image Picker and posted comments. Image Picker has smoother edges because of your feedback!

Hope you'll enjoy using the brand new Image Picker.

Did you know that you can edit in HTML-Kit and automatically preview on an iPad?

Starting with HTML-Kit Tools 20110917, you can test your pages on almost any smart phone, tablet or other device your visitors are likely to use to browse your site. Once you link one or more devices to HTML-Kit Tools, all of them automatically update and display the page you're working on. Easy breezy multi-device testing!

Don't believe it? This is a picture shared by Rene showing an iPad and an iPhone previewing the page in HTML-Kit Tools. Thank you Rene!

If you design web sites, it's very likely that you have to work with images. Lots of them. Even if you don't create or edit images, you'll at least have to preview and insert images.

The brand new image picker in HTML-Kit Tools... is there when you need it (single click), shows you big (and small) thumbnails, makes it easy to navigate image folders, and as described in one of the support forum posts, feels comfortable.

What's there to say about a splash screen? Not much really. It's elevator music for software. Something to look at until you get to start using the program.

On the other hand, HTML-Kit's splash screen hasn't changed since HTML-Kit 292. Not significantly anyway, HTML-Kit Tools simply added "Tools" to the graphic.

The new splash screen is bigger and looks more proportional on high resolution screens than the original. It also tries to keep busy-information to a minimum.

When I say "preview for all" I don't mean it as in people, although everyone is more than welcome to preview through HTML-Kit! I mean, preview in all PC/Mac browsers and other devices including smart phones and tablets.

If you want to skip reading the rest, scroll to the bottom for a demo video and a summary. If you're running HTML-Kit Tools 20110909+, you can try it for yourself by clicking the preview icon on the main menu bar.

Early days

Back in the early days of HTML-Kit, most everyone used Internet Explorer to browse the web. Mozilla was a close second. However, it wasn't until Firefox, a version of Mozilla, that IE had a strong challenger for its market share. Then came Chrome by Google and rapidly took the third place, closing in on Firefox. All these browsers were mainly running on PCs and Macs.

Enter mobile browsing

Browsing the web through mobile phones provided a limited, if not a painful, experience. That's until the introduction of the iPhone. iPhone, iPod and iPad made it much easier to browse the full web, and collectively iOS Safari became the number one browser on the mobile side. Android-based devices, BlackBerry, Windows Phone, WebOS and other mobile platforms are also competing in this space to provide better web browsing on the go.

What does this have to do with HTML-Kit?

That's a long way of saying that the websites you create today will be viewed in many different browsers and on a wide variety of devices to come. Even though the major browsers are more standards-compliant than ever, it's still important to test websites in multiple browsers to make sure that your visitors see the sites as you intended. Depending on your audience, it's also important to test in different form factors as well.

Editing in HTML-Kit and testing in multiple browsers

HTML-Kit already gives you many options for previewing pages. Most likely though, the internal preview tab (F12 key) is what's used most or at least what's used first. This works well in majority of cases. However, if you need to preview in more than one browser, the currently available options are not as convenient as pressing F12. And, there's a technical and practical limit as to how many different browser modes the preview tab could possibly support.

A brand new option for previewing in, well, all

To solve the not-so-unique problem of easily previewing in multiple browsers, and increasingly more and more devices, HTML-Kit Tools is introducing a brand new preview option. First, here's a quick demo:

The video, which was created during an eureka moment, focuses in on the cool effect of multiple devices updating with the press of a key (can you guess what operating systems and devices are shown?). Of course, you don't have to borrow as many devices as I did to make this video to actually make use of this feature. It simply gives you a new option for preview what you're editing in HTML-Kit Tools through almost any browser or device. By the way, if you're new to HTML-Kit and wondering why F12 is mentioned all over the place in this video, it's because F12 is the shortcut key for previewing inside HTML-Kit.

In short:

• To get started, click the preview icon on the main menu bar at the top (in HTML-Kit Tools 20110909+).
• You can preview in any external browser that's installed on your system, as easily as pressing F12 while editing pages.
• One or more browsers assigned to HTML-Kit Tools will automatically refresh to show the latest changes you've made. You don't have to manually reload the page in each browser or open/close browser tabs.
• On multi-monitor setups, you can edit on the primary monitor and use secondary monitor(s) for previewing through browsers of your choice.
• In addition to previewing in browsers on your system, you can configure it to preview from Mac OS X, Linux or any operating system running on other computers.
• Testing your pages on smart phones and tablets works just as conveniently -- pressing F12 in HTML-Kit refreshes browsers on other devices as well.
• This feature is optional, even with all the goodness it brings. You can continue to use F12 the way you have, and turn on this feature if and when you want. It's also quite easy to toggle it off.

I'm trying out new icons for Edit, Preview, Output and Tidy tabs which are on the bottom of HTML-Kit Tools editor windows.

The new icons are much less colorful. They are grayscale, in fact. The goal is, though, to make tab icons less distracting while you're editing. Not that the current color icons (the top set of icons in the image) are all that distracting, but once you know the function of each tab the icon should blend into the background.

On a somewhat related note, Output and Tidy tabs may even disappear in upcoming updates when you open certain types of documents. For example, there's really no need for the Tidy tab when you're editing a *.txt file.

A question that popped up, since the posting of ? , was how to submit colorizer styles to HTML-Kit Tools plugins page.

So if you've designed a cool colorizer style, or a warm colorizer style depending on your choice of color tones, here's how to share it:

1. Select "View > Colorizer > Styles > Edit Colorizer Styles" from the main menu.
2. Select the name of your Colorizer Style from the list.
3. Change to the "HTML-Kit Plugins > Colorizer Styles" tab, and
4. Click "Upload Plugin" to submit your Colorizer Style to the plugins page.

One of the great joys of developing HTML-Kit is getting to play with plugins. When I got the email notification of arrival of a new plugin yesterday, it did not matter that it was middle of the night. I had to go check it out pronto.

It did not disappoint.

Introducing Copenhagen Nights Style -- a dark color scheme written by Henrik J. Larsen for HTML-Kit Tools syntax highlighter.

I've generally used a light colorizer style, partly because HTML-Kit defaults to a soft-white background. I must admit though that a dark editor background is easy to get used to, especially with a well-made colorizer style such as this one.

Default style:

With Copenhagen Nights style:

So without further ado, here's how to get your hands on it:

1. Open HTML-Kit Tools and select "Tools > Install Plugins" from the main menu. Or click the plugin icon on the Action Bar.
2. Browse to "Colorizer Styles" section and select hlCopenhagenNightsStyle.
3. Click Install hlCopenhagenNightsStyle.
4. Once installed, open a HTML document and select "View > Colorizer > Styles > Copenhagen Nights Style" to see it in action.