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

• Read source code more easily with new font options -- Source Code Pro and DejaVu Sans Mono. Makes similar looking characters, such as 1, l, i, | and O, o, 0, more legible.
• Support for Emmet coding (previously called Zen Coding). To test this feature, type h1+div#content>ul#mylinks>li3>a[href]{Link $} and press Ctrl+E. Can also be used to expand individual tags as well: type ul>li5 and press Ctrl+E.
• Touchscreen Plugins for using your smartphones and tablets to access HTML-Kit Tools plugins.
• Ctrl+Enter keyboard shortcut now offers multiple options, including the previous >br /< shortcut and Emmet/Zen Coding expansion.
• Incremental Search dialog (Ctrl+F) now has an option to toggle Case Sensitive matching.
• Dutch, German and Italian translations written by Gerard, Martin and Luca, have been updated to the latest releases in the setup.
• Improved document tabs so that they stay the same size while switching, reducing the chances of accidentally clicking the next tab.

Comparison of coding fonts in HTML-Kit Tools

HTML-Kit Touchscreen plugins on iOS (iPod Touch)

HTML-Kit Touchscreen plugins on Android (Samsung Galaxy Tab)

HTML-Kit Touchscreen plugins on BlackBerry OS (BlackBerry Playbook)

Document tabs with consistent tab sizes

Thank you TreeHouse!

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

We all from time to time have stared at a character to figure out if it's 1, l or i. Not to mention O, o and 0.

To help avoid these cases, and of course to make source code look better on screen, HTML-Kit Tools now comes with support for Bitstream Vera Sans Mono and Source Code Pro fonts. You can easily select one of these fonts in preferences, without having to install them on the system. Of course any fonts that you have on the system, such as Consolas, Lucida Console or any other, are still supported as well.

Bitstream Vera Sans Mono font was originally designed by Jim Lyles at Bitstream.

Source Code Pro is a brand new font designed by Paul Hunt and the type team at Adobe.

Here's to seeing your code in a whole different way (well, slightly more legible way at least).

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

I'm happy to announce that Zen Coding is now supported in HTML-Kit Tools!

Zen Coding, which is now called Emmet, is a popular choice for high speed coding written by Sergey Chikuyonok.

Imagine typing a CSS selector-like expression and expanding it to HTML code. So instead of typing all of this code:

<h1></h1>
<div id="content">
<ul id="mylinks">
<li><a href="">Link 1</a></li>
<li><a href="">Link 2</a></li>
<li><a href="">Link 3</a></li>
</ul>
</div>

you can type the following line and press Ctrl+E to quickly generate the HTML:

h1+div#content>ul#mylinks>li*3>a[href]{Link $}

That particular expression was used to demonstrate the power of Emmet expressions. If you're new to Emmet, try typing a tag name like DIV:

div

and pressing Ctrl+E to expand it to:

<div>|</div>

Now try this:

ul>li*5

Ctrl+E expands it to the following unordered list with 5 items:

<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>

Looks fun and useful? You can read more about the syntax of Emmet expressions here.

Thank you Sergey, for your efforts on Emmet.

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

What if you could quickly swipe through a list of recent files and open the ones you want with a tap... from your smartphone or a tablet?

HTML-Kit Touchscreen Plugins is a brand new feature that experiments with this exact idea.

If nothing else, a touchscreen device can be a secondary monitor and another method of input. Instead of using up space on your primary display, you might offload color pickers, snippets, help windows and recent file lists to one or more smartphones or tablets.

You can play with the early preview of this feature by clicking Touchscreen Plugins icon in the latest TreeHouse build.

HTML-Kit Touchscreen plugins on iOS (iPod Touch)

HTML-Kit Touchscreen plugins on Android (Samsung Galaxy Tab)

HTML-Kit Touchscreen plugins on BlackBerry OS (BlackBerry Playbook)

Thinking about registering HTML-Kit for the full version of HTML-Kit Tools but the full price is a bit much?

Now when you go to the order page, you can pick a price that's affordable between $29 and $99 (limited time offer). Please be considerate when picking a price because this won't work if everyone picks the lowest price.

Making money was never the reason for creating HTML-Kit but as you know it takes resources and time to develop, support and keep things running. If you or your boss can afford it, you can help by registering for a little bit more.

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

Project window with sleek redesign (scroll down for more)

• Project window has a sleek redesign that reduces clutter and blends in with the selected color theme.
• Action Buttons that used to appear below each folder in project window now appear next to each folder. This frees up more space to view folders and files. The new Action Buttons appear as the mouse pointer hovers over folders.
• New File dialog on project window now shows an option to create files using text from the Clipboard.
• Officially supports running on the final released version (RTM) of Windows 8 desktop.
• Updated the look of the Actions Bar, Channel tabs and New/Open/Save icons on the top left-hand side.
• Document Label Color, which is configured in project windows and folders, now show up on the document tab and the bottom of the editor window.
• Fixed an issue where the Image Picker window showed up on the wrong monitor, when Tools is not on the primary monitor of a multi-monitor configuration.

Action Buttons appear next to the folder

Updated look of the Actions Bar

Create new files from Clipboard content

Official support for running on Windows 8 desktop

Image Picker window

Thank you TreeHouse!

HTML-Kit Tools started initial support for Windows 8 when it reached Developer Preview milestone and has been officially supporting Windows 8 since Consumer Preview.

Now that the final version of Windows 8 has been released to manufactoring (RTM), I'm happy to share this screenshot of HTML-Kit Tools running on the final version of Windows 8 desktop:

It's hard to beleive that I've tested HTML-Kit on virtually all desktop PC versions of Windows since Windows 95! That's Windows 95, NT 4, 98, ME, 2000, XP, 2003 (server), Vista, 2008 (server), Windows 7 and now Windows 8.

If you haven't seen HTML-Kit run on Windows 95, here's HTML-Kit 292 back then on an Intel 486:

HTML-Kit 292 looked essentially the same on Windows 98 and Windows ME. This is 292 running on Windows 2000:

And HTML-Kit 292 running on Windows XP:

Finally, moving up to HTML-Kit Tools running on Windows 7:

Thank you for sticking with HTML-Kit these many years!

If you're a PHP developer, you may appreciate many features that are built into HTML-Kit Tools. Features like PHP colorizers in light and dark color themes, selection matching for quickly finding variables, full screen editing for viewing more of your PHP code in a clutter-free display, instant search, brace highlighting, code folding, and many more.

HTML-Kit Tools has even more support for PHP than what you see in the default installation. As you know, PHP has a rich library of thousands of functions and support for them is available through optional HTML-Kit plugins.

Installing optional PHP plugins

So to get started, select "Tools > Plugin types > HTML plugins > Get plugins" from HTML-Kit Tools main menu and click "Browse A-Z" tab. The plugins page that opens up has a list of 100+ categories of PHP functions:

Install the plugins you're most likely to use. In this example, we'll install hkPHPFunctions_Strings plugin.

PHP menus on Actions Bar

Once installed, you'll get a PHP Strings button on the Actions Bar (Channel 2) with a drop-down menu:

PHP function dialogs

Each item on the menu brings up a dialog (sometimes called a wizard) for constructing and inserting the selected function:

Docked windows

Drop-down menus are great for displaying a reasonable number of items but of course some PHP libraries have dozens of functions. hkPHPFunctions_Strings plugin alone has 80+ PHP string functions. To make it easier to browse them, you can dock the list as a side window.

If you click the "Strings" button (instead of opening the long menu) on "Actions Bar > Channel 2 > PHP" tab, you'll get a window like this:

You get function dialogs here as well, and the window itself can be auto hidden when not in use. If you install multiple PHP function categories, you'll be able to have all or some of them open as docked windows.

PHP function name reminder

If you forget the exact name of a PHP function, type the first few characters or even just the first letter of a function, and press Ctrl+Space to get a list of matches:

Reusing variable names

You may have already used selection matching feature to find PHP variables and other code. But did you know that you can also get a list of variables in the current document and quickly insert them by typing '$' + letter ($var for example) and pressing Ctrl+Shift+J :

List of variables and function names

When you're editing a large PHP file with many variables, classes and function names, it may be more useful to have a docked window that list them all. "View > Document information > Code Navigator" gets you exactly that. You can then simply click a variable name or a function name to quickly jump to it in the editor.

Keeping TO-DOs and other notes

Instead of writing down to-do items in a separate file or a piece of paper, you can keep quick notes in PHP files. These notes can then be viewed and referenced in "Code Comments" window ("View > Document information > Code Comments" menu option) each time you open a given PHP file.

File versioning

If you ever need to go back to a previous version of a script, or just need to see what changes were made on a given date, open the script in question and select "File > Restore > Previous version" from the main menu. HTML-Kit Tools comes with easy-to-use file versioning feature that you can use to browse through previous versions of files.

Shorthand

ksPHPShorthandCtrlStructures is an excellent plugin written by Kay that makes great use of HTML-Kit Tools Shorthand feature. After installing ksPHPShorthandCtrlStructures, try this: type "switch" (without quotes) and press Ctrl+J shortcut. The areas highlighted in green are points in code that you can easily edit and jump to, using Tab and Shift+Tab keys.

I'll let you discover what happens but also try moving to the end of the last "case" and pressing Ctrl+J again!

So in the interest of not turning this blog post into a short novel, let me end the list of PHP-related features here. Please feel free to drop a note on the support forum if you have further questions or if I've failed to mention a feature that you've found useful.

Starting with the next HTML-Kit Tools update, the project window will blend in with your favorite color theme. Here's a preview of what the new project window looks like:

Project window in new style

The good looking icons you see on the project toolbar were licensed from IcoMoon!

Project window in old style

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

Redesigned tabs and new color themes (scroll down for more)

• Document tabs have been redesigned for a better looking editing environment with less distraction. The new tabs make most of available screen space and nicely blends in with the user interface color theme. Supports both light color themes and dark color themes, for the user interface and the colorizer style used by the editor.
• A new dark color themed colorizer style compliments the light color themed colorizer style that comes as the default. To try out the dark colorizer style, click the down arrow on UI customization button and select "Colorizer style > Default dark color theme."
• "UI Customization" button on the Actions Bar, in "Start > Customize" section, for easily changing color themes, colorizer styles, text size and language.
• Initial support for opening and colorizing LESS files. LESS is a popular extension to CSS that implements variables, mixins, operators and functions on top of the current CSS standard.
• Many other user interface tweaks.

Thank you TreeHouse!

Purple and black color theme, with Dutch translation by Gerard

Pink and white color theme, with German translation by Martin

Green and white color theme, with Italian translation by Luca

Would you like to see a Tip of the Day page or a list of great tips about using HTML-Kit Tools? If we all add a tip or two it won't be difficult to create a helpful resource everyone can learn from.

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

New footer

Preview while editing

• Landscape Preview window that previews the current document as you edit. To enable this feature, press Ctrl+F12 or click "Active Preview" button on the status bar.
• Brand new status bar and document tab area.
• An icon on the menu bar for quickly switching to the full screen editing mode.
• Ctrl+W keyboard shortcut for closing documents, in addition to the default shortcut Ctrl+F4.
• Speed improvements related to scrolling large documents.

Thank you TreeHouse!

I've gotten several reports from HTML-Kit users about Norton security software removing HTML-Kit setup files. In short, this is a false positive. But here's a long explanation of what's happening.

One of the relatively new trends in security software is a cloud-based file scoring/reputation system. If a program is not widely used, then it's assumed to have a high risk (even if there's no actual problem with the program).

You may have seen this in action if you've seen a warning like "WS.Reputation.1" (Symantec/Norton Security software), "this file isn't commonly downloaded" (IE SmartScreen Filter), or "this file appears malicious" (Chrome).

The intention here is good -- warn people when they try to download a program that hasn't already been downloaded by a lot of other people.

The problem is that this hurts independent software developers.

HTML-Kit is a frequently updated program. Each time it's updated, its file signature looks new to security software and so they think that HTML-Kit has never been seen before or has a low reputation. Then they warn potential users that it's risky to download it. Again, this happens even when a program doesn't pose any security threat at all.

Of course a program's reputation won't go up until enough computers running a given security software report back to their individual cloud how many times a program has been downloaded, which creates somewhat of a chicken and egg problem.

If you've run into this problem while trying to install HTML-Kit, or want to double check the program before installing, you can run a third-party scan of HTML-Kit. As always, please feel free to contact me or post on the forum if you have any further questions or concerns.

I'll end this post with quotes from other software developers running into this issue.

As Steven Kelly says in his blog:

Google Chrome's 'this file appears malicious' warnings are false and unfounded in too many cases. Similar problems exist with IE, and some anti-virus software. Their tests include two factors that have nothing to do with whether the code is malicious: packed executable, and low number of previous downloads.

A quote from Andreas Löw's blog entry "WS.Reputation.1 or How Symantec ruins independent developers" on 23-Jun-2012:

"Symantec blocks a TexturePacker updates from being installed because they say it has a 'bad reputation'" Well - it's a new update - which is why nobody was able to install it yet. And nobody will install it because Symantec tells people not to do so... Since nobody does install it the reputation is low - which causes Symantec to warn people about installing it...

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

I see a lot of exciting things happening in HTML5/CSS/JavaScript space, and I want to make it easier to take advantage of them in HTML-Kit Tools.

HTML Tidy was the first (and the dearest to me!) third-party tool that was integrated in HTML-Kit. HTML-Kit may not even exist if it wasn't for the encouragement I got from Dave Raggett who wrote Tidy. HTML-Kit in turn was the first program to add a graphical interface to Tidy.

More recently, Markdown written by John Gruber was integrated in Tools. "File > New > HTML from plain text" menu option is one of the ways you can create Markdown documents. You can of course open *.md files, preview as HTML with a single key/click, and convert Markdown text to HTML as well.

LESS written by Alexis Sellier is another one of these excellent tools that helps improve web coding, especially if you write a lot of CSS. LESS adds support for variables, operations and functions to CSS. Check it out if you haven't already, and you'll soon be able to play with it in HTML-Kit Tools. And yes, support for LESS will go beyond syntax highlighting *.less files!

A quick update (10-Jul-2012): There's only been one donation totaling $45.00 (which is refunded, not having met the fundraising goal). It's unfortunate but at least I've tried :)

I'm pretty bad at designing websites, but not too bad at creating tools for web developers. If this is your first visit, hi, my name is Chami. I've run a so called "one man shop" developing and supporting HTML-Kit editor for over a decade. If you've never heard of this software, here are some online and offline references.

HTML-Kit has always been a native Windows application but I get many requests for a native Mac version. Unfortunately, there's no magical switch for converting a complex Windows app to a Mac app. Besides, I think software works best when they're designed from ground up for specific platforms.

So, if you'd like to see a web dev toolset with the work style of HTML-Kit, here's your chance. Since this wouldn't be a quick weekend project, I need to make sure that there's serious interest out there. Being an independent developer, like many of you out there, I'd also need to raise money to get this going.

In short, the goal is to raise $3000.00 USD with small donations starting at $20.

Make a Donation to the Project

If the total amount of donations doesn't reach the goal and the project doesn't get started, you can simply request an automatic refund within 60 days (maximum time allowed by PayPal).

• For a donation of $20, or more, your name will be on the list of contributors (unless of course you request not to be mentioned), linked to from the app as a heartfelt thank-you for helping to get the Mac version started. Everyone making a donation of $20 or more will get a free single-user license to the first release (finished product).

• $35 donation, or more, adds access to beta versions so you can help shape it in the early stages.

• $45 donation, or more, adds a license to the current Windows app, in addition to the Mac app. This is still less than the cost of a single license for the current Windows version. May come in handy if you switch back and forth Windows and OS X, or if you're planning to move to one of these platforms in the future.

• $100 donation, or more, adds a life-time free upgrades to all future releases of HTML-Kit, regardless of the platform.

• $500 donation, or more, adds your name to the "About" dialog, prominently displayed on the front tab.

• $1000 donation, or more, adds a "sponsored by" link on HTML-Kit website for 1 year, to your homepage or company website.

So let's get this app started! (and tell your friends)

Make a Donation to the Project

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

IE and WebKit split preview

Scan QR Code in your phone to preview the page in HTML-Kit Tools

• Improved support for testing pages that use latest HTML5 and CSS3 features from within the Preview tab.
• Ability to split the Preview window for testing pages in IE-mode and WebKit-mode at the same time. This side-by-side rendering of pages in IE and WebKit modes make it possible, with a single key press or a click, to test pages for majority of desktop and mobile browsers in use today, including Internet Explorer, Chrome, Safari, iOS, Android, BlackBerry, Windows Phone and WebOS.
• Easily run the current page being previewed through WebKit/Chrome-based Inspector. This makes it possible to access debugging and profiling tools right from the Preview tab. These Inspector tools include JavaScript console, HTML elements view, CSS properties, missing resource checker, page load timeline and more.
• QR Code on Extended Preview window makes it easier to link up phones and tablets to HTML-Kit Tools preview.
• Support for running on Windows 8 desktop. Tested on Release Preview.
• "Skip optional setup dialogs" option for speeding up setup by using default values for Program Folder, Start Menu Folder, and Additional Tasks.
• W3C CSS Validation Service helper on "Actions Bar > Tools" tab and "Tools > Extra" menu updated to support CSS3 validation.
• The old image picker was removed in favor of the new image picker.

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

So you want to test your pages in Android phones, Kindle Fires, iPads, iPhones and other connected devices? Now there's a QR Code on the Extended Preview window for easily linking up your device with HTML-Kit Tools.

Go ahead, edit and preview in virtually all your browsers and devices!

From time to time I have to take off my programming hat (grudgingly) and put on fundraising hat.

As some of you may know, I've been developing various versions of HTML-Kit for over a decade. I enjoy coding. I love the community here and building tools that try to make web development a more enjoyable experience.

As is the case with most projects like this, it requires time and resources. Your registrations help fund it.

I need your help getting the word out about HTML-Kit Tools to your friends and co-workers. Maybe even nudge the boss to register a few copies of HTML-Kit :)

http://www.htmlkit.com/register/ (check out the discounts)

I'll now put my programming hat back on, keep adding cool features and listening to your feedback.

– Chami

(originally posted on HTML-Kit forum)

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

• The actual color of HTML/CSS hex color code is displayed below each color code as a quick reference.
• Switch on the Status Bar for quickly toggling Selecting Matching feature on and off.
• Pressing Escape key clears out Selection Matching marks.
• "Quick Picks" option on Save File As dialog makes it easier to save to previously used project folders. Also provides options for setting the file name to a commonly used file name such as index.html, style.css and script.js.
• Save File As dialog responds to "File Type" selection by changing the file extension to the first extension listed for the selected file type.
• Open/Save File dialogs show a compact version of "Line ending" and "Encoding" drop-down menu options, giving slightly more space to the file list.
• On the setup program, translation author's name is made more visible on a line by itself when a language other than English is selected.
• "preserve-entities" option is now enabled by default in HTML Tidy.

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

So you don't remember the exact colors of all those RGB hex color codes in your CSS and HTML files? No worries. Simply open a file with HTML color codes to see the colors appear below each color code.

When you type a color code, its color appears below the code and automatically changes as you change red, green and blue values.

To get a better view of the color, simply hover your mouse pointer over a color code.

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

• Select text to automatically reveal matches. Select a tag, attribute, class name, variable name or other text to quickly mark matches. To make it easier to spot these matches while scrolling through the document, marks stay active until the next selection. This feature can be toggled on and off using "Edit > Preferences > Editor > Misc > Mark text that match the selected text" option.
• The Setup program can now be run in Italian, thanks to Italian translation contributed by Luca Detomi.
• Ability to run in Windows 8 Desktop (Consumer Preview).

Here's a quick demo of how selection matching works:

HTML-Kit icon on Windows 8 start screen for running HTML-Kit Tools in Windows 8 Desktop:

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

So you want to see where all FORM tags are or where a variable name is used? Simply select a tag, attribute, class name, variable name or any text, and watch how HTML-Kit Tools automatically marks matches. This feature can be toggled on and off under "Edit > Preferences > Editor."

Check out the video to see how this works.

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

Wondering if HTML-Kit Tools runs on Windows 8? I have a three letter answer.

Since the Consumer Preview of Windows 8 was released on Feb 29, 2012 I've been wanting to run HTML-Kit Tools on it. It was possible but required some tweaking at the time.

HTML-Kit Tools now runs on Windows 8 desktop. No tweaks necessary. Simply install it as usual and click the application icon on the Start screen.

I've had some reservations about how switching between Windows 8 Metro-style Start screen and Windows 8 desktop worked in the Developer Preview. Having used the Consumer Preview though, I'm pleasantly surprised how fluid it feels. Windows 8 Consumer Preview is a free download if you're curious, and runs through January, 15, 2013.

Did you know that you can get a tip on how to use a particular feature, plugin or other aspect of HTML-Kit 292, every day?

Here's a tip you won't see there: select "Help > Check for Updates" from HTML-Kit 292 main menu to get your daily tip.

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 dark 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.