Useful HTML code Snippets created using “Manage Snippets” plugin for GEdit text editor

When it comes to writing a post using html editor, you will be having some frequently used codes to do some tasks. Life will be easier, if you have some shortcut key or other faster way (like writing a shortcode and press “tab” key) to insert these frequently used codes. There comes the use of “Snippets”.
 
You can use a text editor like GEdit for typing html codes in a faster way, if you have “Manage Snippets” plugin.
 

Some useful HTML code Snippets are created using “Manage Snippets” plugin for GEdit text editor. These snippets are created to help my blogging.

I have exported these snippets in to the file Snippets_exported.tar.gz
You can import it in “Manage Snippets” plugin. But I failed to import it, when i tried. Instead you can extract the zip file in to ~/.config/gedit/snippets folder. This will work.
 

The details of the snippets are given below.

1. Bold

   Tab trigger: None
   Shortcut key: Ctrl+B
   Snippet code:
   <strong>${1:$GEDIT_SELECTED_TEXT}</strong>$0
   
   Example:

   • HTML Code
     <strong>Selected Text</strong>
   • Output
     Selected Text

2. Italics

   Tab trigger: em
   Shortcut key: Ctrl+E
   Snippet code:
   <em>${1:$GEDIT_SELECTED_TEXT}</em>$0

   
   Example:

   • HTML Code
     <em>Selected Text</em>
   • Output
     Selected Text

3. color

   Tab trigger: color
   Shortcut key: Shift+Alt+C
   Snippet code:
   <span style="color:${1:#A52A2A}">${2:$GEDIT_SELECTED_TEXT}</span>$0
   
   Example:

   • HTML Code
     <span style="color:#A52A2A">Selected Text</span>
   • Output
     Selected Text

4. Block Section

   Tab trigger: block
   Shortcut key: Shift+Alt+B
   Snippet code:
   <div style="background-color:#f0f0f3;padding:.8em;">${1:$GEDIT_SELECTED_TEXT}</div>
&nbsp;
$0
   
   Example:

   • HTML Code
     <div style="background-color:#f0f0f3;padding:.8em;">Here is a new Block Section</div>
&nbsp;

   • Output
     Here is a new Block Section

      

5. Wrap Selection as Link

   Tab trigger: ref
   Shortcut key: Shift+Alt+L
   Snippet code:
   <a style="color:#3366ff;" href="${1:$GEDIT_SELECTED_TEXT}" title="${2:$GEDIT_SELECTED_TEXT}" target="_blank">${3:$GEDIT_SELECTED_TEXT}</a>$0
   
   Example:

   • HTML Code
     <a style="color:#3366ff;" href="https://vishnupalakkal.wordpress.com/" title="https://vishnupalakkal.wordpress.com/" target="_blank">https://vishnupalakkal.wordpress.com/</a>
   • Output
     https://vishnupalakkal.wordpress.com/

6. Br

   Tab trigger: br
   Shortcut key: Ctrl+R
   Snippet code:
   <br>
$0
   
   Example:

   • HTML Code
     Brek after this <br>
Text in Next line

   • Output
     Brek after this
     Text in Next line

7. code box1

   Tab trigger: code
   Shortcut key: None
   Snippet code:
   <span style="display:inline-block;color:#fdfdfd;padding:.2em;background-color:#8f8f8f;border:#bbcddc 2px solid;"><strong><code>${1:Paste your code Here!}</code></strong></span>

   
   Example:

   • HTML Code
     <span style="display:inline-block;color:#fdfdfd;padding:.2em;background-color:#8f8f8f;border:#bbcddc 2px solid;"><strong><code>Paste your code Here!</code></strong></span>

   • Output
     Paste your code Here!

8. code box2

   Tab trigger: codeX
   Shortcut key: None
   Snippet code:
   <div>
${1:Text just above code Here!}<div style="padding:.4em;background-color:#f8f9fa;border:#bbcddc 2px solid;">
[code language="${2:html}" gutter="${3:true}"]
${4:Paste your code Here for Syntax Highlighted Code!}
[/code]
</div><br>
</div>
$0

   
   Example:

   • HTML Code
     <div>
Text just above code Here!<div style="padding:.4em;background-color:#f8f9fa;border:#bbcddc 2px solid;">
[code language="html" gutter="false"]
Paste your code Here for Syntax Highlighted Code!
[/code]
</div><br>
</div>

   • Output
      
     Text just above code Here!

             Paste your code Here for Syntax Highlighted Code!