Snippets Plugin

The Snippets plugin for gedit is probably one of the text editor's more powerful plugins.

Description

Snippets is similar to the Tag List plugin, in that it is used to insert common “snippets” of text into a document. However, it works a bit differently, and is much more customizable, meaning that you can create your own snippets, or even change the way that gedit's default snippets work.

It is aware of the type of text you're editing, similar to the Highlight mode; if you're editing HTML, then you get HTML snippets; if you're editing XML, then you get XML snippets. (It's a little annoying, to me, that HTML and XHTML are treated differently, but probably useful for some people.)

Using Snippets

There are three ways you can insert a snippet into a document: enter its tab trigger and hit the Tab key; press its Accelerator key combination; or press Ctrl+Space, to get a list of potential snippets.

Tab Triggers

For example, suppose you are beginning to edit an HTML document, and want to insert the <body> tag into your document. There is a “body” snippet, which has a tab trigger of body. This means that you can enter the following:

body

Then, with the cursor right after the ‘y’ in “body,” press Tab. gedit will then replace the word “body” with this:

bodyinserted.gif

Keyboard Accelerators

The body snippet has a tab accelerator; in other cases, you can simply use a keyboard shortcut — or accelerator — to insert snippets. For example, there is a snippet for the <br> tag, which has a keyboard accelerator of Shift+Ctrl+Space. Anywhere within an HTML document, if you press Shift+Ctrl+Space, gedit will insert the text <br>, and then move your cursor to the line below.

If All Else Fails…

Alternatively, if you can't remember the tab trigger or keyboard accelerator for a snippet, you can simply press Ctrl+Space, which will present a list of all of the available snippets.

Intelligent Snippets

In some cases, the Snippets plugin is aware of the different pieces of information you might need to enter within your snippet.

For example, let's look again at that example the <body> tag which was inserted:

bodyinserted.gif

Notice that the first attribute is highlighted, so that you can type the ID. Simply type whatever you want, to overwrite the text which is selected. If you press the Tab key again, the cursor will be moved into the onload attribute's value, so that you can enter that. Pressing Tab once more will move the cursor within the <body> tag, for you to continue editing the document. (Pressing Tab after that will work like normal, and insert a tab character into the document.)

Many of the snippets which come out of the box work like this. Further on, we'll see how to create our own snippets, and make them just as intelligent.

Editing Snippets

As mentioned, if you're not satisfied with the default snippets provided with this plugin, you can add your own, or change the default ones. Simply go to Tools->Manage Snippets, and you will get a window with all of the available snippets.

snippetsmanager.png

You'll notice that there are different snippets available, depending on what type of document you're editing. That is, if you choose the HTML syntax highlighting, there will be HTML snippets, whereas if you choose the C++ syntax highlighting, there will be different snippets available. Within any category, you can select an existing snippet, to edit it (or delete it), or use the New button to create a new one. You can change the trigger or accelorator for any snippet. (Although you should be aware that certain accelerator key combinations will already be in use; e.g. you couldn't create a snippet with an accelerator of Ctrl+c, because that's already used by the Copy command.)

In the text box on the right-hand side of the snippet editor, you enter all of the text that you want inserted for this snippet. For example, for the “body snippet,” this text box contains this:

<body id="${1:ID} " onload="$2"}>
     $0
</body>

(Note that there is a bug in this particular snippet; an extra } character.)

There are some strange-looking things in that snippet's text; these are placeholders, which are special pieces of text within a snippet that affect how the snippet works. The following sections list some of the different placeholders you can use within a snippet.

Tab Placeholders

A Tab Placeholder configures how the Tab key works, within your snippet. There are 9 available tab place holders, which are designated by using $1 through $9. $1 would be the first place you want the cursor to appear, $2 the second, etc. For example, suppose you create a snippet like this:

<sometag attr1="$1" attr2="$2">

</sometag>

When you insert this snippet, gedit will insert the following text into your document:

sometag1.gif

Notice that the cursor is sitting where the $1 had been in our snippet. You can then enter whatever value you want for that attribute. If you press the Tab key, the cursor will be moved to the next tab cursor; in this case, where I originally put the $2 in my snippet. Pressing Tab additional times will keep moving the cursor to additional tab cursors, until there are no more, and it will then move the cursor to the end of the snippet's text. From that point on, pressing Tab will have no effect on the snippet; it will simply insert a tab character, as normal.

There is an additional trick you can use for tab placeholders; you can default the value of a tab placeholder. In this case, you would use the ${n:default} syntax, where n would be the tab number, and default would be the text you want inserted by default.

For example, suppose we changed our earlier snippet to this:

<sometag attr1="${1:value 1}" attr2="${2: value 2}">

</sometag>

Inserting the snippet would produce the following:

sometag2.gif

Because the Snippet plugin is aware of the tab placeholders, the text “value 1” will be selected; if you start typing, the text will be replaced with whatever you type. If you then press the Tab key, gedit will next highlight the text “value 2” so that you could type a new value for that.

There is also a special tab place holder, which is $0. This is the placeholder where the cursor should end, when the Tab key has been pressed for the last time. For example, in our example above, the last time the user presses the Tab key, the cursor will end up after the </sometag> closing tag; if we change our snippet to this:

<sometag attr1="${1:value 1}" attr2="${2: value 2}">
    $0
</sometag>

then the last place the cursor is placed will be within the tag, which makes more sense, in this case.

Selected Text

In many cases, you don't just want to insert a bunch of text; you might want to surround the selected text. For example, you could create a snippet for creating an anchor, like the following:

<a href="${1:URL}"></a>

However, to be really useful, it would be great if you could select a piece of text, and wrap the <a> and </a> tags around that text. You can do that with the $GEDIT_SELECTED_TEXT placeholder. We could change our snippet to this:

<a href="${1:URL}">$GEDIT_SELECTED_TEXT</a>

It would work like this:

Suppose I have the following text, in the editor:

Click here to see my homepage.

I then highlight the text “Click here” and insert the snippet. My document would then look like this:

<a href="URL">Click here</a> to see my homepage.

and the text “URL” would be highlighted, so that I could type in the address.

If there is no text selected in the document, then nothing would appear where the $GEDIT_SELECTED_TEXT placeholder is in the snippet. In other words, if we were to insert the snippet above, with no text selected, it would simply insert

<a href="URL"></a>

File Name

Similar to the $GEDIT_SELECTED_TEXT placeholder, there are two placeholders for inserting the filename into a snippet: $GEDIT_FILENAME and $GEDIT_BASENAME. $GEDIT_FILENAME will insert the name of the file, including its full path on the filesystem; for example, a file named blah.html sitting on my desktop might produce /home/serna/Desktop/blah.html.

$GEDIT_BASENAME will insert just the name of the file, without the path; so for this example, it would just insert blah.html.

Backing Up Changes

If you have created your own snippets, or modified existing snippets, you'll probably want to be able to make a backup of those changes. This way, you can copy your changes to another computer, where you also have Ubuntu installed, or have your changes ready, if you ever reinstall Ubuntu on your current computer.

Backing up your changes is easy. Simply go to the ~/.gnome2/gedit/snippets directory1, where there will be some XML files. (Notice the period at the beginning of the .gnome2 directory, which means that it's hidden.) Copy these files to your backup location. On any new computer, where you want to keep your changes, simply put the files back into this location.

Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-Share Alike 2.5 License.