Syntax and Features

If you are familiar with other markup languages like Markdown, understanding Extreme Markup is fairly easy.

Like other text markup languages, most notations are line-based. Breaking in the middle of a sentence significantly changes its structural meaning. In addition, most notations start with exactly the first character in a line. If the first character is a whitespace, the notation is not recognized.

Paragraphs

In most cases, one or two consecutive line breaks means a new paragraph. Three or more continuous breaks widen the space.

Headings

There are three levels of headings other than the post titile.

*Heading1
**Heading2
***Heading3

Heading1

Heading2

Heading3

Hierarchical Lists

You can list items hierarchically with leading - or +. - denotes an unordered list item, while + denotes an ordered one. The number of leading signs corresponds to the depth.

-English
++Foo
++Bar
-Japanese
++Hoge
++Huga

• English
  1. Foo
  2. Bar
• Japanese
  1. Hoge
  2. Huga

Definition Lists

If you want to list name-value pairs, put : at the first column of the line, type the name, put : again, and then type the value.

If you want to use : as a part of the name, use its character code : instead.

:OS:Ubuntu 13.04
:Browser:Google Chrome

OS

Ubuntu 13.04

Browser

Google Chrome

Tables

You can create simple tables by delimiting cells by |.

Put * first to denote header cells

|*ID|*Name|*City|*Country|
|1|Espen|Oslo|Norway|
|2|Harald|Munich|Germany|
|3|Sam|San Jose|USA|

ID	Name	City	Country
1	Espen	Oslo	Norway
2	Harald	Munich	Germany
3	Sam	San Jose	USA

Blockquotes

When you quote a part of text from other web pages, wrap it with >> and <<.

Optionally, you can add its link and title by placing it between > signs.

>>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<<

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

>http://en.wikipedia.org/wiki/Lorem_ipsum:Lorem ipsum : Wikipedia>
In publishing and graphic design, lorem ipsum[1] is a placeholder text (filler text) commonly used to demonstrate the graphic elements of a document or visual presentation, such as font, typography, and layout, by removing the distraction of meaningful content.
<<

In publishing and graphic design, lorem ipsum[1] is a placeholder text (filler text) commonly used to demonstrate the graphic elements of a document or visual presentation, such as font, typography, and layout, by removing the distraction of meaningful content.

Lorem ipsum : Wikipedia

Pre-formatted Texts

You can write pre-formatted text by wrapping it with >| and |<. You are able to use HTML tags and some notations of Extreme Markup inside them.

>|
　　　 ∧ ∧
～′￣(´ー`) < Cited from [http://ja.wikipedia.org/wiki/%E3%82%A2%E3%82%B9%E3%82%AD%E3%83%BC%E3%82%A2%E3%83%BC%E3%83%88:Wikipedia]
　UU￣ U  U
|<

　　　 ∧ ∧
～′￣(´ー`) < Cited from Wikipedia
　UU￣ U  U

Source Code

Embedding source code is also easy. Just like blockquotes or pre-formatted text, wrap it with >|| and ||<.

By including Prettify : Javascript code prettifier in your blog, you can syntax-highlight the code. Tell the code type by placing it between | signs. You can choose available types from the same page.

>|rb|
class Foo
  def bar
    "baz"
  end
end
||<

class Foo
  def bar
    "baz"
  end
end

Footnotes

You can add footnotes to your posts. Place notes where they should be and wrap them with (( and )).

You can add footnotes((Footnotes are notes at the foot of the page.)) to your posts.

You can add footnotes*1 to your posts.

Read More Sign

To place Blogger's "Read More" sign, put three or more consecutive = sign in a new line.

===

Raw HTML Tags

You can type HTML tags anywhere, and in most cases they works as normal HTML tags. However, in some cases, the results might be different from what you expect. The reason is that the input HTML is recognized as a group of paragraphs and the parser inserts p tags between the lines.

To avoid this, Extreme Markup has a special notation. By wrapping the most outer tags with > and <, the parser stops inserting p tags.

><div class="foo">
No p tags here.
</div>< 

Links

By default, URL texts are not linked. To link to the URLs, bracket them.

http://example.com - no link
[http://example.com] - link without title
[http://example.com:Example Page] - link with title

http://example.com - No Link

http://example.com - link without title

Example Domain - link with title

Automatic Title Fetching

By using the Blogger's Add Link button , this extension fetches and inserts the title automatically, along with the URL.

Images

This is probably the most attractive feature in this extension. You can insert images from the Blogger's Insert Image button , resize them, reposition them, and add caption to them in one step.

First, insert an image with as always. Then, you will see a line of text like this:

[gimage:26c4e5d0-91b6-f321-2060-bd1ae8f805c9:right,200]

Though you might also notice that another line is inserted at the end of the textarea:

[alias:26c4e5d0-91b6-f321-2060-bd1ae8f805c9:http://1.bp.blogspot.com/-1pN9PT1H9ao/UdQ3s5gcroI/AAAAAAAAS28/3xqrFUmFNpY/s1600/IMG_20130630_191621.jpg]

you can ignore it, because it is just an alias data behind the scenes. Just be careful not to remove it.

On the other hand, the former line is important because it contains settings. Inside the bracket, there are three values, separated by :. And the third value is again separated by ,. This third value is what you can modify.

There are four things you can modify: position, size of the image, size of the frame, and value of alt attribute. And the order is arbitrary. Let's see some examples:

Example 1

[gimage:26c4e5d0-91b6-f321-2060-bd1ae8f805c9:right,200]
Figure 1. My pretty froggy.

Figure 1. My pretty froggy.

position

right

size of the image

200px

size of the frame

200px

alt attribute

""

Example 2

[gimage:26c4e5d0-91b6-f321-2060-bd1ae8f805c9:center,200,300,a frog under my bike]
Figure 1. My pretty froggy.

Figure 1. My pretty froggy.

position

center

size of the image

200px

size of the frame

300px

alt attribute

"a frog under my bike"

Example 3

[gimage:26c4e5d0-91b6-f321-2060-bd1ae8f805c9:a frog under my bike,left,300]
Figure 1. My pretty froggy.

Figure 1. My pretty froggy.

position

left

size of the image

300px

size of the frame

300px

alt attribute

"a frog under my bike"

Caption

As you have seen in the examples above, you can add a caption to the image by placing it just on the next line of the image. To widen the width of captions, modify the size of the frame as in Example 3.

$\LaTeX$

With the power of MathJax, you can use $\LaTeX$ in your posts.

You can use [tex:\LaTeX].

[tex:\frac{a}{2b} = c^2]

[tex:\mathbf{V}_1 \times \mathbf{V}_2 = \begin{vmatrix} \mathbf{i} & \mathbf{j} & \mathbf{k} \\ \frac{\partial X}{\partial u} & \frac{\partial Y}{\partial u} & 0 \\ \frac{\partial X}{\partial v} & \frac{\partial Y}{\partial v} & 0 \end{vmatrix}]

You can use $\LaTeX$.

$$\frac{a}{2b} = c^2$$ $$\mathbf{V}_1 \times \mathbf{V}_2 = \begin{vmatrix} \mathbf{i} & \mathbf{j} & \mathbf{k} \\ \frac{\partial X}{\partial u} & \frac{\partial Y}{\partial u} & 0 \\ \frac{\partial X}{\partial v} & \frac{\partial Y}{\partial v} & 0 \end{vmatrix}$$

To use this feature, paste the following scripts in your blog:

<script type="text/x-mathjax-config"> MathJax.Hub.Config({ skipStartupTypeset: true }); </script> <script type="text/javascript" src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML-full"></script> <script type="text/javascript"> window.addEventListener("load", function() { MathJax.Hub.Process(); }, false); </script>

*1: Footnotes are notes at the foot of the page.