Using The XHTML Code Editor

Monday, April 21, 2008

The XHTML code editor in Raven (version 0.9.279) is almost feature complete with following enhancements.

  • Find and Replace.
  • Zoom.
  • Paste as XHTML.
  • Text Formatting.
  • Brace (< and >) matching and XHTML tag and attribute name highlighting (syntax color coding).
  • XHTML schema valid code completion.
  • XHTML validation.
  • XHTML code cleanup and Tidy services.

When using the code editor, note that the content of the editor should content of a XHTML <body> tag. Do not enter <xhtml>, <head> and <body> tags. Use only child tags of the <body> tag such as <p>.

Find and Replace:
The Find/Replace dialog is exactly the same dialog used in WYSIWYG Designer. Press Ctrl+F (or EditMenu->Find) to bring up the dialog.

Zoom Controls:
Press ctrl and + (plus) or ctrl and - (minus) to increase or decrease the XHTML editor font size.

Paste as XHTML (Ctrl + Shift + V):
This is similar to functionality found in the Designer. The difference between Paste (Ctrl + V) and Paste as XHTML (Ctrl + Shift + V) is that the latter will convert the content into a xhtml code fragment before pasting the content into the editor. For example if you copied the following plain text content to the clipboard:

This is the first paragraph
Second line.

Second paragraph
2nd line
3rd line

then pasting as xhtml insert the following formatted code:

   <p>
     This is the first paragraph
     <br/>
     Second line.
   </p>
   <p>
     Second paragraph
     <br/>
     2nd line
     <br/>
     3rd line
   </p>

Text Formatting:
Text formatting toolbar buttons and keyboard shortcuts (e.g. Bold or Ctrl+B, etc.) are available in XHTML editor. To use it, simply select the text and press the toolbar button (such as Bold). The appropriate markup is then wrapped around your text selection. For example, if the text selection is

Hello World

then the final markup would be

<strong>Hello World</strong>

If you do not have any text selected when you invoke one of operations (e.g. Bold or Ctrl+B), then the relevant markup is inserted with the cursor positioned between the open and close tag. For example, the Bold button would insert

<strong>[cursor]</strong>

where [cursor] indicates the cursor.

Note: Be careful when you apply markup on selected text as the markup is applied to the whole selection even if the selected text had partial markup. For example if the selected text is

em>[cursor]</em>

(i.e. includes partial text for <em> open tag), then after applying Bold, the final markup would look like

<strong>em>[cursor]</em></strong>

Notice that the <strong> tag was applied over the partial <em> tag since it was part of the selection.

Code Completion:
The auto complete list is a list of schema valid xhtml and css keywords that can be inserted at current document (cursor) position. The list is automatically shown when you type in a start tag "<" or an end tag "</" character sequence. This list will also automatically hide if any of the characters you typed did not match a tag in the list shown.You can also display the list by pressing Ctrl + Space (e.g. after the < character).

Below is a screen shot showing the tag list at the top (root) level:


Once you are inside a tag, Ctrl+Space will show the list of available attribute names for the current element.


If you are in a style attribute, Ctrl+Space will show the list of available CSS style names and or values depending on the context. Similarly, attribute value options for href, class attributes are shown when available.

The list for class attribute values shown are based on what you have already used in the current document (post). The href values are also based on list of links you have in the current working document. For example, soon after typing http:// you should see a list of possible matches links based on other links in the document. Screen shot below shows the auto complete on font-family CSS style attribute:


The auto-completion on a close tag character sequence </ will show the matching closing tag (when possible i.e. as long as your content is well formed).

XHTML Validation:
This version of Raven also allows you to validate your post entry using XHTML 1.0 Strict or Transitional by pressing the Validate button on the tool bar. The validation messages with warning/error line numbers are shown in the message list below the editor along with corresponding "markers" (icons) on the editor margin.

Note: validation is performed against your post - and not against your Blog site. You should make sure that your Blog site is XHTML compliant (most are based on templates).


XHTML Clean up and Tidy:
This tool bar option allows you to manually run a basic code clean up process (e.g. convert plain text to xhtml, clean up MS Word tags etc.) followed by a call to W3C Tidy. Note that is also automatically performed when you save or switch to the Designer.

Labels: ,