More than a Text Editor

Indenting

To indent large sections of text, simply highlight the section and choose Edit->Shift Right (Ctrl-.). To remove an indentation, choose Edit->Shift Left (Ctrl-,). There are corresponding buttons in the tool bar for these menu options (see later in this text).

By default, Bluefish will use tabs for indenting, but can be configured to use spaces if you have Use spaces to indent, not tabs selected in the Editor preferences panel. The number of spaces used is the same as the Tab width option in the same preferences panel.

Here's an extract of Dante's work indented with the Shift Right button in the main tool bar:

Figure 3.65. Indenting part of a text

A screen shot of a text indented with the shift right button

Auto tag closing

By default, Bluefish will automatically produce closing tags for HTML and XML documents. For example, if you type <p> within an HTML document, bluefish will produce </p>. So, as soon as you finish typing a non-empty HTML tag, meaning the tag is supposed to have a closing tag, Bluefish will help you out and close the tag automatically. This feature can be turned off by unchecking the Document->Auto Close HTML Tags (Ctrl-T) menu option.

Bluefish has two modes for tag closing, an XML mode and an HTML mode. In XML mode, Bluefish will add a closing tag to any tag that is not closed itself with />. In HTML mode, Bluefish excludes all known tags that do not need a closing tag, such as <br> and <img>.

Bluefish will choose the mode based on the file type of the document. In the filetype preferences panel, the default mode for each file type can be set. See the section called “Modifying file types” for more info.

Spell checker

Figure 3.66. Bluefish Spell Checker

A screen shot of the Bluefish 1.0 spell checker

Bluefish uses aspell for spell checking. If the aspell libraries are not installed on your system, then the spell checking feature will not be available. At the aspell web site you can also download dictionaries for many different languages.

To launch the spell checker, select Document->Check Spelling... or click on the ABC button on the main tool bar. The spell checker will launch in a separate window, which you can keep open as you edit files.

You have the option to check a whole document or just a selection, to use a personal or a session dictionary, and to choose the language depending on the installed dictionaries.

Click on Spell Check to start spell checking the current document.

You may want to set a default dictionary by first choosing the language in the Language pop up menu, then clicking on Set default.

Key words for different languages can be ignored using filters. Currently, the only filter is for HTML. If you want to help write more filters, join the mailing list.

Function reference

The function reference browser contains reference information for different programming and markup languages. Currently, Bluefish comes with a PHP reference, a CSS 2.0 reference, an HTML reference, and a Python reference. The functions are grouped, depending on the language, by type, module, object, etc.

The function reference browser will display an info window on the bottom by checking the Show info window check box. In this window, information about the currently selected item is shown. The type of information shown can be configured in the right-click context menu (see Info Type later in this text).

In the reference browser's contextual menu, you can simply insert the text for the selected item by choosing Insert. Or, you can get a little help using Dialog, which launches a dialog window containing fields for the currently selected item's attributes or parameters. For a summary of an item's usage, choose Info. The contextual menu is also accessible on a group of functions and at the top level of a reference.

Figure 3.67. The reference browser contextual menu

A screen shot of the reference browser contextual menu

The Options menu accessible via the contextual menu offers three actions:

Figure 3.68. The reference browser options menu

A screen shot of the reference browser options menu
  • Rescan reference files in case you have customized one of them, so that the new items be available.

  • Left doubleclick action, which can be:

    • Insert to insert the function in the document for latter parametrizing if needed

    • Dialog to insert the function in the document while filling in the parameters in a dialog window:

      Figure 3.69. A function reference dialog window

      A screen shot of a function reference dialog window
    • Info to display a window with all available info about the function:

      Figure 3.70. Info available for a function

      A screen shot of all info available for a function
  • Info Type: this is where you can customize what appears in the info window. It can be:

    • the function Description (this is the default)

    • the Attributes/Parameters of the function

    • some Notes about the function

HTML

HTML is obviously the most supported language in Bluefish. There is a special HTML tool bar with many dialogs, and two menus to work with tags:

  • the Tags menu:

    Figure 3.71. The HTML Tags menu

    A screen shot of the HTML tags menu

  • the Dialogs menu:

    Figure 3.72. The HTML Dialogs menu

    A screen shot of the HTML dialogs menu

The preferences have several settings on HTML style under HTML.

The HTML tool bar has two types of buttons. You can recognise each type by the tool tip if you move the mouse over the button:

  • First there are buttons that will open a dialog for some HTML tag. These buttons have a tool tip that ends with three dots.

    Figure 3.73. An HTML button with a three-dotted tool tip

    A screen shot of an HTML three-dotted tool tip

  • Second, there are buttons that will directly insert text, these buttons do not have the dots in the tool tip.

    Figure 3.74. A simple HTML tool tip button

    A screen shot of a simple HTML tool tip

If you want to add an HTML tag around some block of text, select the block of text, use the HTML tool bar or the Tags or Dialogs menu to insert the tag. The opening tag will be inserted before the selected block, the closing tag after the selected block.

An existing tag can be edited by right-clicking the tag, and select Edit tag in the context menu. You can also place the cursor in the tag and use Dialogs->Edit tag under cursor... (F3). Not all tags, however, have a dialog, so this is not always possible. Colors in the style #RRGGBB can also be edited from the right-click context menu.

In the reference browser on the left panel there is an HTML reference available. All possible attributes and valid values can be found in this reference. See the section called “Function reference” for more info.

Special find an replace features

There are several special search and replace actions in the menu Edit->Replace special. These can be used to convert special characters (like < and &), or ISO characters to their HTML entities, as well as to change the letters case.

Figure 3.75. The Replace special menu

A screen shot of the Replace special menu

In all cases, when you want to replace some part of the text, you should first select the part to replace, then use the appropriated menu item.

Thumbnail generation

Bluefish can automatically generate thumbnails for images. A thumbnail is a small image, with a link to the larger image. Bluefish will create the small image based on your settings, and insert a <img> tag in the file, and a <a> tag linking the original. The thumbnails are created in the same directory as the original sources.

The formats used for thumbnails may be png or jpg format. By default, the format used for thumbnails is png. You can change it in the Images panel of Preferences. For jpg images, the thumbnail extension is jpeg.

There are actually two thumbnail dialogs in Bluefish:

  • an Insert thumbnail dialog,accessible from the Dialogs->General->Insert Thumbnail... (Shift-Alt-N) or from the Standard bar of the HTML toolbar.

    Figure 3.76. The Insert thumbnail icon

    A screen shot of the insert thumbnail icon

  • a Multi thumbnail dialog, only accessible from the Standard bar of the HTML toolbar.

    Figure 3.77. The Multi thumbnail icon

    A screen shot of the multi thumbnail icon

The Insert thumbnail dialog is very straightforward. You select the image file, provide some <img> tag attributes, choose the scaling, and press OK. The scaling factor is chosen by moving the slider directly under the image. The resulting image is previewed in the preview frame. Bluefish will create the thumbnail with extension _thumbnail.png or _thumbnail.jpeg (depending of the settings for images in the preferences).

Figure 3.78. The Insert thumbnail dialog

A screen shot of the insert thumbnail dialog

Tip

If the source image is not accessible, change webimage to image in the Select File window loaded after clicking on browse for choosing an image. This way you can choose whichever format you want for the original sources. Another way to do it is to change the definition of webimage (see the section called “Modifying file types”).

If that does not solve the problem, it is likely that the type of images you want to load is not defined yet in preferences. In this case, change the definition of image as explained in the section called “Modifying file types”.

As last resource, if you don't want to change the generic file types, you may choose All files in the pop up menu at the bottom of the Select File window.

The code generated for a png image and a png thumbnail looks like this:

<a href="/Users/michga/Desktop/343-4351_IMG_2.png">
<img src="/Users/michga/Desktop/343-4351_IMG_2_thumbnail.png" 
width="89" height="134" border="0" name="Gamboling" 
alt="Gamboling in the meadow" align="middle"></a>

and for a jpg image and jpg thumbnail:

<a href="/Users/michga/Desktop/343-4351_IMG_2.JPG">
<img src="/Users/michga/Desktop/343-4351_IMG_2_thumbnail.jpeg" 
width="89" height="134" border="0" name="Gamboling" 
alt="Gamboling in the meadow" align="middle"></a>
Note

You can perfectly mix jpg images with png thumbnails or the other way around.

If the html file exists beforehand, the paths to image and thumbnail are inserted relative to the location of the html file. On the contrary, if the html file does not exist beforehand, the full paths to the image and thumbnail are inserted in the code.

In the multi thumbnail dialog, you first choose the scaling method, then you set the corresponding width and/or height parameters. Finally, you may want to adjust the HTML code to be inserted for each image.

Scaling can be based on a fixed ratio, a fixed width, a fixed height, or a fixed width and fixed height (this last option does not keep the original aspect ratio!).

In the HTML code for each image, you can use several placeholders, such as:

  • %r for the original filename

  • %t for the thumbnail filename

  • %w for the original width

  • %h for the original height

  • %x for the thumbnail width

  • %y for the thumbnail height

  • %b for the original file size (in bytes)

The default string is:

<a href="%r"><img src="%t" width="%x" height="%y" border="0"></a>

After you have set up the scaling method and parameters, as well as the HTML code, you can select multiple images. Bluefish will create the thumbnails and insert the code.

Here is an example of two thumbnails created with a non nul border width and middle-aligned, with a fixed height and width, disregarding the aspect ratio.

The Multi thumbnail window is the following:

Figure 3.79. The Multi thumbnail dialog

A screen shot of the multi thumbnail dialog

And the generated code is:

<a href="/Users/michga/Desktop/tot/343-4351_IMG_2.png">
<img src="tot/343-4351_IMG_2_thumbnail.png" width="50" 
height="50" border="5" align="middle"></a>
<a href="/Users/michga/Desktop/tot/343-4352_IMG_2.png">
<img src="tot/343-4352_IMG_2_thumbnail.png" width="50"
height="50" border="5" align="middle"></a>
Note

Full pathnames are always used to reference original image sources. The paths to thumbnails are relative to the html file path if the html file already exists, while they are inserted as full paths when the html file does not exist.

Below is a full procedure to quickly generate thumbnails from a directory of image files. This example is purposedly made with deprecated tags, so that you have an idea of what can be made with the variables. Feel free to adjust it when using CSS style sheets.

Procedure 3.4. Generating a photos album with multi thumbnails

  1. Put the image files in a folder of their own

  2. Open a new file in bluefish, click on the Multi thumbnail... icon in the Standard bar tab of the html tool bar.

  3. Enter the scaling percentage in the Scaling (%) field

  4. Change the html code as follows:

    <tr><td><a href="%r">
    <img src="%t" 
    width="%x" height="%y" border="0"></a>
    </td>
    </tr>
    <tr><td>Original: %w x %h</td></tr>

    and click OK.

  5. Choose the folder containing the images from the Select files for thumbnail creation window, click Ctrl-A to select all files, then click OK. The code generated by Bluefish will look like the following:

    <tr><td><a href="/Users/michga/Desktop/photos/343-4344_IMG.JPG">
    <img src="/Users/michga/Desktop/photos/343-4344_IMG_thumbnail.png" 
    width="80" height="53" border="0"></a>
    </td>
    </tr>
    <tr><td>Original: 1600 x 1065</td></tr>
    <tr><td><a href="/Users/michga/Desktop/photos/343-4347_IMG.JPG">
    <img src="/Users/michga/Desktop/photos/343-4347_IMG_thumbnail.png" 
    width="80" height="53" border="0"></a>
    </td>
    </tr>
    <tr><td>Original: 1600 x 1065</td></tr>
  6. Use Ctrl-A to select the file's contents and click on the Table icon located in the Tables tab of the HTML tool bar to embed the code into table tags.

    Figure 3.80. The Table icon in the html tool bar

    A screen shot of the table icon in the html tool bar
  7. Save the file wherever you want.

If you want to add the file name and the file size in bytes, use this code:

<tr><td><a href="%r">
<img src="%t" width="%x" height="%y" border="0"></a>
</td>
</tr>
<tr><td>%r:  %w x %h (%b bytes)</td></tr>

Customizing the Quick bar

The Quick bar is a user defined tool bar. All HTML tool bar buttons can be added to the Quick bar by simply right-clicking the button and selecting Add to quickbar.

Figure 3.81. Adding an element to the Quick bar

A screen shot showing how to add an element to the Quick bar

And automagically you will see the element in the Quick bar:

Figure 3.82. The added element in the Quick bar

A screen shot showing the added element in the Quick bar

Note that you cannot add a pop up menu. Thus, if the item you want to add is inside a pop up menu (as is the code tag located in the Context formatting pop up menu of the Fonts tool bar), you have to first click on the pop up menu to display its contents, then to right click on the desired element to insert it in the Quick bar.

Figure 3.83. Adding a pop up menu element to the Quick bar

A screen shot showing how to add a pop up element to the Quick bar

If you want to remove items from the Quick bar, right-click them and select Remove from Quick bar.

Figure 3.84. Removing an element from the Quick bar

A screen shot showing how to remove an element from the Quick bar

You can also change the location of an element in the Quick bar. To do so, right-click the element and select Shift left or Shift Right as desired. The element will be moved to the left or to the right of its neighborough. Notice that this is not a drag and drop action; you may have to repeat the process if you want to move the element farther.

Figure 3.85. Moving an element within the Quick bar

A screen shot showing how to move an element within the Quick bar

Custom menu

To customize items in the Custom menu tool bar, you will use the Custom menu element:

Figure 3.86. Accessing the custom menu

A screen shot of the default custom menu's access

The Custom menu->Edit custom menu... leads to the Custom Menu Editor. The Load new item allows you to load a new menu in case you have directly changed the custom_menu file located in the .bluefish directory within your HOME directory, while Reset item allows you to return to the default custom menu under the same circumstances.

The custom_menu file is created upon install Bluefish and corresponds to some default entries, the ones you can see in the Custom menu tool bar. These will give you an idea what can be done with the custom menu.

The custom menu operates only on elements of the Custom menu tool bar, and allows you to:

  • add "often used" items to an existing menu

  • search and replace patterns to the Replace menu

  • create new menus

The Custom Menu Editor is the place where you make all changes to the custom menu. The location for entries in the custom menu is defined by their menu path in the Custom Menu Editor:

Figure 3.87. The Custom Menu Editor

A screen shot of the custom menu editor

It has four parts:

  • The top one with all action buttons:

    • Add which adds new menu entries, once all necessary fields have been filled in

    • Apply which applies changes to an existing menu entry, once it has been edited

    • Delete which deletes the menu entry currently selected in the Menu path list

    • Close which discards changes

    • Save which saves the changes and exit the editor

  • The Menu Path field below the buttons, to enter either an existing or a new menu path

  • The Menu path list on the left side, which lists existing menu paths. A menu path looks like /Main menu/submenu/item or /Main menu/item. Here's an extract of the default custom menu paths:

    Figure 3.88. Extract of the default custom menu path

    A screen shot showing an extract of the default custom menu path

  • A custom part on the right side, whose contents changes depending of the type of menu. There are two types of items in the Custom Menu Editor:

    • the Custom dialog, which will insert a string, optionally based on values asked in a dialog

    • the Custom Find and Replace, which will run a replace, also optionally based on values asked in a dialog. Here's how the Custom Replace dialog looks like:

      Figure 3.89. The Custom Replace Dialog

      A screen shot of the custom replace dialog

The most simple custom dialog item has a menupath, for example /MySite/author, and a Formatstring before, for example written by Olivier. If you add this item, you can add this string by selecting the menu item.

Procedure 3.5. Adding a custom menu based on custom dialog

  1. Choose Custom menu->Edit custom menu... in the custom menu tool bar.

  2. Enter /MySite/author in the Menu Path field of the Custom Menu editor.

  3. Enter written by Olivier in the Formatstring Before field located on the right.

  4. Click on the Add button at the top.

    Notice that upon adding the new entry, it is listed at the bottom of the Menu path list:

    Figure 3.90. A new custom entry in the Menu path list

    A screen shot of a new custom entry in the Menu path list

  5. Click on the Save button. This will add the menu to the Custom menu tool bar:

    Figure 3.91. A new menu in the custom menu tool bar

    A screen shot of a new menu in the custom menu tool bar

Note that the new menu is placed at the right end of the custom menu tool bar. When closing Bluefish and relaunching it, it will be placed in alphabetical order, except that the Replace menu will always be at the far right side.

In another example, you have a string you often need to set before and after some block of text, for example <div class="MyClass">YourBlockOfText</div>. To do it:

  1. Open the Custom Menu Editor

  2. Enter /MySite/div with class in the Menu Path field

  3. Enter <div class="MyClass"> in the Formatstring Before field

  4. Enter </div> in the Formatstring After field

  5. Click on Add, then on Save. The item will appear in the menu.

If you now select some text:

Figure 3.92. A block of selected text before activating the menu

A screen shot of a block of selected text before activating the menu

And activate this menu item, you will see that the first bit of text is added before the selection, and the second bit is added after the selection:

Figure 3.93. A block of text after activating the menu

A screen shot of a block of text after activating the menu

Suppose you want to improve this last example. You have both MyClass1 and MyClass2 and want to be able to choose the desired class when activating the menu. Here's how to do it:

  1. Open the Custom Menu Editor

  2. Browse the Menu path list to retrieve the /MySite/class with div entry and click on it to make appear its components in the Menu Path and Custom Dialog fields

  3. Click on the top arrow of the Number of Variables popup menu to get 1 in the field. As you see a Variables entry appears where you can enter the name for variable %0. As name we enter MyClass number

  4. Now change the FormatString Before field to take this new variable into account, as following: <div class="MyClass%0">

  5. Click on Apply so that your changes will be taken in account, and click on Save to update the menu.

If you now activate this menu after having selected a block of text, you will be presented with a new dialog asking you for the value of MyClass number:

Figure 3.94. The new div with class dialog

A screen shot of the new div with class dialog

After entering the desired value, the same process as before will occur, using the value you provided. Here we have entered 1 as value:

Figure 3.95. The block of text after entering the value

A screen shot of the block of text after entering the value

Tip

you can use the Return and Tab keys to format the output.

Any variable can be used any times you want in the dialog.

Find and replace items are no different. The dialog has some more options, each of these options correspond to the regular replace dialog. Again you can use variables like %0, %1 etc. to make a certain menu item more flexible.

SCREENSHOT BY ????

External programs, filters

You can integrate external commands such as browsers, or text filters. If you want to use for example a sed command as a filter, you can add it like this to the external commands and filters (in the preferences dialog): sed -e 'some sed command' > '%f' < '%s'

Figure 3.96. Bluefish External Menu

A screen shot of the Bluefish 1.0 external menu

To add items to the external menu:

  1. Edit > Preferences

  2. Choose the "External Programs" tab.

  3. Click "Add" to add a new item

  4. Double-click on the name field to give the command a name (this name will become an option in the "External" menu).

  5. Double-click on the command field to type the command to be executed.

I WILL ADD AN EXAMPLE HERE LATER

Items within External > Outputbox allow for programs to give feedback by opening an output box within Bluefish's main window. To create an Outputbox menu item:

  1. Edit > Preferences

  2. Choose the "Output parsers" tab.

  3. Click "Add" to add a new item

  4. Double-click on the name field to give the command a name (this name will become an option in the "External" menu).

  5. Double-click on the pattern field and give a regular expression pattern with subpatterns, such as line ([0-9]+) column [0-9]+ - (.*).

  6. Double-click on the "File #" field and give the number for the subpattern matching the filename (-1 for none)

  7. Double-click on the "Line #" field and give the number for the subpattern matching the line number

  8. Double-click on the "Output #" field and give the number for the subpattern matching the actual error message

  9. Double-click on the "Command" field and the command to execute, %s is the current filename

  10. Toggle the "Show all output" check box to show output NOT matching the regular expression.

Note: Of course, it is also possible to add these items by editing the file named "rcfile_v2" found in the user's home directory (~/.bluefish/rcfile_v2). The fields are delimited by colons and correspond to those found in the GUI.