An Introduction To Bluefish Text HTML Editor

Bluefish screenshot
​ Screen shot courtesy Jon Morin

 The Bluefish code editor is an application used to develop web pages and scripts. It is not a WYSIWYG editor. Bluefish is a tool used to edit the code that a web page or script is created from. It is meant for programmers who have knowledge of writing HTML and CSS code and has modes to work with the most common scripting languages like PHP and Javascript, as well as a great many others. The main purpose of the Bluefish editor is to make coding easier and to reduce errors. Bluefish is free ​and open source software and versions are available for Windows, Mac OSX, Linux, and various other Unix-like platforms. The version I am using in this tutorial is Bluefish on Windows 7.

of 04

The Bluefish Interface

The Bluefish Interface
The Bluefish Interface. Screen shot courtesy Jon Morin

The Bluefish interface is divided into several sections. The largest section is the edit pane and this is where you can directly edit your code. On the left side of the edit pane is the side panel, which performs the same functions as a file manager, allowing you to choose the files you want to work on and rename or delete files. 

The header section at the top of the Bluefish windows contains several toolbars, which can be shown or hidden via the View menu.

The toolbars are the main toolbar, which contains buttons to perform common functions like save, copy and paste, search and replace, and some code indentation options. You will notice that there are no formatting buttons such as bold or underline.

That’s because Bluefish does not format code, it is only an editor. Below the main toolbar is the HTML toolbar and the snippets menu. These menus contain buttons and sub-menus that you can use to automatically insert code for most language elements and functions.

of 04

Using The HTML Toolbar in Bluefish

Using The HTML Toolbar in Bluefish
Using The HTML Toolbar in Bluefish. Screen shot courtesy Jon Morin

The HTML toolbar in Bluefish is arranged by tabs that separate the tools by category. The tabs are:

  • Quick Bar - you can pin other tools on to this tab for items that you use frequently.
  • HTML 5 - gives you access to common tags and elements in HTML 5.
  • Standard - common HTML formatting options are accessed on this tab.
  • Formatting - less common formatting options are found here.
  • Tables - various table generating functions, including a table wizard.
  • List - tools for generating ordered, unordered, and definition lists.
  • CSS - stylesheets can be created from this tab as well as layout code.
  • Forms - most common form elements can be inserted from this tab.
  • Fonts - this tab has shortcuts to work with fonts in HTML and CSS.
  • Frames - the most common functions for working with forms.

Clicking on each tab will make buttons relating to the relevant category appear in the toolbar below the tabs.

of 04

Using The Snippets Menu In Bluefish

Using The Snippets Menu In Bluefish
Using The Snippets Menu In Bluefish. Screen shot courtesy Jon Morin

Below the HTML toolbar is a menu called the snippets bar. This menu bar has submenus relating to a variety of programming languages. Each item on the menu inserts commonly used code, such as HTML doctypes and meta information for example.

Some of the menu items are flexible and generate code depending on the tag you wish to use. For instance, if you wish to add a preformatted block of text to a web page, you can click the HTML menu in the snippets bar and choose the “any paired tag” menu item.

Clicking this item opens a dialog that prompts you to enter the tag you wish to use. You can enter “pre” (without the angle brackets) and Bluefish inserts an opening and closing “pre” tag into the document: <pre></pre>.

of 04

Other Features of Bluefish

Other Features of Bluefish
Other Features of Bluefish. Screen shot courtesy Jon Morin

While Bluefish is not a WYSIWYG editor, it does have the ability to let you preview your code in any browser you have installed on your computer. It also supports code auto-completion, syntax highlighting, debugging tools, a script output box, plugins, and templates that can give you a jump start for creating documents that you frequently work with.