Sandbox - o7acode.net

Edition

Voir cette page en français

= o7aCode, as easy as BBCode =

o7aCode allows to easily format the text. For example, '''here's how''' to apply strong emphasis, for emphasis, do ''like this''. You can also --cross out text--, ++insert text++ or ""quote text"". To quote a block of text, do like this :

"""
Block of text quoted...

... which can fill several lines.
"""

To make a link : [http://www.example.net/]entitled of the link[/], or more shortly (without entitled) : []http://www.example.net/[/].

To insert an image :

{http://galeries.o7a.net/bertrand/mini/photos1/photo11.jpg}

The lists :

* 1st item,
* 2nd item,
* 3rd item ...

However, I've not planned an easy syntax in order to insert "gadgets" like the colorization of the text...

= o7aCode, as comprehensive as html =

You may have seen that to insert titles, I've put equal signs. The number of the equal signs fill in about the title level, for a subtitle :

== The lists ==

The numbered lists :

# numbered item,
# numbered item,
# numbered item ...

The several levels lists :

* an item, a sublist :
** a sub-item,
** another sub-item,
* another item,
* a 3rd one, a numbered sublist :
*# a numbered sub-item,
*# a 2nd one, a sub-sublist :
*** a sub-sub-item,
*** another,
* etc ...

== Some other syntaxes ==

You can make (abbreviations)abbr(/), give <<sources>> of a ""quotation"", insert em dash ---in order to make parenthetical statement---, carriage returns without changing of paragraph : /-/ along with horizontal rules :

 ----

Nowadays, documents written in one time and by an unique person are scarce (on wikis for example). That's why comments are interesting.

The comment in-line : // after these two slashes, the text is deleted
	
In block : /* Here's a comment '''in block'''

Where we can insert several lines... */

== Insertion of code ==

The insertion in-line : °°[b]some BBCode[/b]°°, and here's code in block, with syntax colorization :

php :

°°° php
function truncate($str, $lenght_max, $with_abbr=true) {
	if(strlen($str) > $lenght_max) {
		if($with_abbr) $returned = '<abbr title="'.$str.'">';
		$returned.= substr($str, 0, ($lenght_max-3)).'...';
		if($with_abbr) $returned.= '</abbr>';
	}
	else $returned = $str;
	return $returned;
}
°°°

html :

°°° html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
		<title>o7a.net - Home page</title>
		<link rel="stylesheet" type="text/css" href="http://o7a.net/css/main.css" media="screen" />
	</head>
	<body>
...
	</body>
</html>
°°°

If you don't want the syntax colorization :

°°°
//STRONG EMPHASIS
if($this->getParam('active_strongEmphasis')) {
	$content = preg_replace_callback('#\'\'\'(.*)\'\'\'#mU',array(&$this,'transformStrongEmphasis'),$content);
}

//EMPHASIS
if($this->getParam('active_emphasis')) {
	$content = preg_replace_callback('#\'\'(.*)\'\'#mU',array(&$this,'transformEmphasis'),$content);
}
°°°

== Attributes ==

o7aCode allows to insert many html markups, but their parametrages keep hitherto strong restricted... How to fill in the links °°title°° attributes ? How to give images an alignment ?

It's possible to fill in ''all attributes'' of ''all markups'' seen yet : images, links and titles, as well as emphasis markups, lists or even paragraphs !

You can ---firstly--- fill in predefined attributes ---with a certain order---. For that, you must precede them by two colons. For example, the °°title°° attribute of [http://www.example.net :: fictive link for the example]this link[/] is defined.

Predefining all attributes would be tedious because the order is imposed, which restrict the predefinition to the most used attributes. For other attributes, the syntax is a bit different : you must precede the attribution by two semicolons, put the attribute entitled, then its value (separating the two by one or more non-alphanumeric characters). For example, the °°id°° attribute to [http://www.example.net ;; id : link1]this link[/] is defined.

You can obviously blend the two kind of attribution, the only order to respect is the predefined attributes one.

=== ''All'' markups :: id_for_thetitle ===

{http://galeries.o7a.net/bertrand/mini/photos2/photo5.jpg :: Spanish railway station :: right} // .left, .right and .center are defined in the css.

''Emphasis :: class_for_em'', '''strong emphasis ;; onclick donothing() :: class_for_strong''', °°code :: class_for_code°°, etc ...

[http://www.example.net :: title :: en :: id_for_thelink]a link[/], [;; class class_for_link]http://www.example.net[/] ; (abbreviation :: en)abbr(/) ...

To give attributes to a paragraph, You only must define them at the end of it. :: class_for_paragraph

____ // Allows to display the text below the image and no longer at its left.

For lists :

* Here's a (list item::en)°°li°°(/) with attributes, :: class_for_li
* and another one with which are defined the °°ul°° attributes, ;; id id_for_theli ]] a_class_for_ul
* It's the two °°]°° which separate attributes of the °°li°° and the °°ul°°.

---- class_for_hr



"""
Quotation in block...

blabla...
""" me :: en

°°° css
h1 {
	border-bottom: 1px #c7d6df solid;
	text-align: right;
	margin: 0;
	margin-bottom: -1.5em;
}
a {
	text-decoration: none;
	color: #003c9c;
}
a:hover {
	text-decoration: underline;
}
...
°°° ;; onClick : action()

= Alternatives =

== ponctual deactivation ==

Sometimes, some characters are interpreted whereas we don't want. To deactivate the interpretation of one character, you only have to precede it by a backslash ; To display a backslash, deactivate it with another backslash : \\. Problems between emphasis and apostrophes often happen (three apostrophes are interpreted as strong emphasis), the solution is to deactivate the apostrophe by a backslash.

== o7aCode and html ==

If with all this syntax possibilities you don't obtain what you want, inserting html is always possible (a block non-translated), without having to write the whole document in html ! For that, put your html code between \##> and \<##.

##>

<p>Here's some html...</p>

<##

= Extensions =

The syntax is very improvable and wait for being improved ; For example, I've created an extension allowing to quickly make links to wikipedia articles :

* [wikipedia:Hypertext_Markup_Language]Article about (Hypertext Markup Language :: en)html(/)[/]
* [wp:html]Hypertext Markup Language[/]
* [wikipedia]html[/]
* [wp]html[/]

Don't hesitate to suggest more extensions !

Result

o7aCode, as easy as BBCode

o7aCode allows to easily format the text. For example, here's how to apply strong emphasis, for emphasis, do like this. You can also ~~cross out text~~, insert text or quote text. To quote a block of text, do like this :

Block of text quoted...

... which can fill several lines.

To make a link : entitled of the link, or more shortly (without entitled) : http://www.example.net/.

To insert an image :

The lists :

1st item,
2nd item,
3rd item ...

However, I've not planned an easy syntax in order to insert "gadgets" like the colorization of the text...

o7aCode, as comprehensive as html

You may have seen that to insert titles, I've put equal signs. The number of the equal signs fill in about the title level, for a subtitle :

The lists

The numbered lists :

numbered item,
numbered item,
numbered item ...

The several levels lists :

an item, a sublist :
- a sub-item,
- another sub-item,
another item,
a 3rd one, a numbered sublist :
1. a numbered sub-item,
2. a 2nd one, a sub-sublist :
  - a sub-sub-item,
  - another,
etc ...

Some other syntaxes

You can make abbr, give sources of a quotation, insert em dash –in order to make parenthetical statement–, carriage returns without changing of paragraph :
along with horizontal rules :

Nowadays, documents written in one time and by an unique person are scarce (on wikis for example). That's why comments are interesting.

The comment in-line :

In block :

Insertion of code

The insertion in-line : [b]some BBCode[/b], and here's code in block, with syntax colorization :

php :

function truncate($str, $lenght_max, $with_abbr=true) {
	if(strlen($str) > $lenght_max) {
		if($with_abbr) $returned = '<abbr title="'.$str.'">';
		$returned.= substr($str, 0, ($lenght_max-3)).'...';
		if($with_abbr) $returned.= '</abbr>';
	}
	else $returned = $str;
	return $returned;
}

html :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
		<title>o7a.net - Home page</title>
		<link rel="stylesheet" type="text/css" href="http://o7a.net/css/main.css" media="screen" />
	</head>
	<body>
...
	</body>
</html>

If you don't want the syntax colorization :

//STRONG EMPHASIS
if($this->getParam('active_strongEmphasis')) {
	$content = preg_replace_callback('#\'\'\'(.*)\'\'\'#mU',array(&$this,'transformStrongEmphasis'),$content);
}
 
//EMPHASIS
if($this->getParam('active_emphasis')) {
	$content = preg_replace_callback('#\'\'(.*)\'\'#mU',array(&$this,'transformEmphasis'),$content);
}

Attributes

o7aCode allows to insert many html markups, but their parametrages keep hitherto strong restricted... How to fill in the links title attributes ? How to give images an alignment ?

It's possible to fill in all attributes of all markups seen yet : images, links and titles, as well as emphasis markups, lists or even paragraphs !

You can –firstly– fill in predefined attributes –with a certain order–. For that, you must precede them by two colons. For example, the title attribute of this link is defined.

Predefining all attributes would be tedious because the order is imposed, which restrict the predefinition to the most used attributes. For other attributes, the syntax is a bit different : you must precede the attribution by two semicolons, put the attribute entitled, then its value (separating the two by one or more non-alphanumeric characters). For example, the id attribute to this link is defined.

You can obviously blend the two kind of attribution, the only order to respect is the predefined attributes one.

All markups

Spanish railway station

Emphasis, strong emphasis, code, etc ...

a link, http://www.example.net ; abbr ...

To give attributes to a paragraph, You only must define them at the end of it.

For lists :

Here's a li with attributes,
and another one with which are defined the ul attributes,
It's the two ] which separate attributes of the li and the ul.

Quotation in block...

blabla...

h1 {
	border-bottom: 1px #c7d6df solid;
	text-align: right;
	margin: 0;
	margin-bottom: -1.5em;
}
a {
	text-decoration: none;
	color: #003c9c;
}
a:hover {
	text-decoration: underline;
}
...

Alternatives

ponctual deactivation

Sometimes, some characters are interpreted whereas we don't want. To deactivate the interpretation of one character, you only have to precede it by a backslash ; To display a backslash, deactivate it with another backslash : \. Problems between emphasis and apostrophes often happen (three apostrophes are interpreted as strong emphasis), the solution is to deactivate the apostrophe by a backslash.

o7aCode and html

If with all this syntax possibilities you don't obtain what you want, inserting html is always possible (a block non-translated), without having to write the whole document in html ! For that, put your html code between ##> and <##.

Here's some html...

Extensions

The syntax is very improvable and wait for being improved ; For example, I've created an extension allowing to quickly make links to wikipedia articles :

Don't hesitate to suggest more extensions !

XHTML Code

<h3>o7aCode, as easy as BBCode</h3>
 
<p>o7aCode allows to easily format the text. For example, <strong>here's how</strong> to apply strong emphasis, for emphasis, do <em>like this</em>. You can also <del>cross out text</del>, <ins>insert text</ins> or <q>quote text</q>. To quote a block of text, do like this :</p>
 
<blockquote>
<p>Block of text quoted...</p>
 
<p>... which can fill several lines.</p>
</blockquote>
 
<p>To make a link : <a href="http://www.example.net/">entitled of the link</a>, or more shortly (without entitled) : <a href="http://www.example.net/">http://www.example.net/</a>.</p>
 
<p>To insert an image :</p>
 
<p><img src="http://galeries.o7a.net/bertrand/mini/photos1/photo11.jpg" /></p>
 
<p>The lists :</p>
 
<ul>
	<li>1st item,</li>
	<li>2nd item,</li>
	<li>3rd item ...</li>
</ul>
 
<p>However, I've not planned an easy syntax in order to insert &quot;gadgets&quot; like the colorization of the text...</p>
 
<h3>o7aCode, as comprehensive as html</h3>
 
<p>You may have seen that to insert titles, I've put equal signs. The number of the equal signs fill in about the title level, for a subtitle :</p>
 
<h4>The lists</h4>
 
<p>The numbered lists :</p>
 
<ol>
	<li>numbered item,</li>
	<li>numbered item,</li>
	<li>numbered item ...</li>
</ol>
 
<p>The several levels lists :</p>
 
<ul>
	<li>an item, a sublist :
		<ul>
			<li>a sub-item,</li>
			<li>another sub-item,</li>
		</ul>
	</li>
	<li>another item,</li>
	<li>a 3rd one, a numbered sublist :
		<ol>
			<li>a numbered sub-item,</li>
			<li>a 2nd one, a sub-sublist :
				<ul>
					<li>a sub-sub-item,</li>
					<li>another,</li>
				</ul>
			</li>
		</ol>
	</li>
	<li>etc ...</li>
</ul>
 
<h4>Some other syntaxes</h4>
 
<p>You can make <abbr title="abbreviations">abbr</abbr>, give <cite>sources</cite> of a <q>quotation</q>, insert em dash &ndash;in order to make parenthetical statement&ndash;, carriage returns without changing of paragraph : <br /> along with horizontal rules :</p>
 
 <hr />
 
<p>Nowadays, documents written in one time and by an unique person are scarce (on wikis for example). That's why comments are interesting.</p>
 
<p>The comment in-line :</p>
 
<p>In block :</p>
 
<h4>Insertion of code</h4>
 
<p>The insertion in-line : <code>[b]some BBCode[/b]</code>, and here's code in block, with syntax colorization :</p>
 
<p>php :</p>
<pre class="code php"><span class="kw2">function</span> truncate<span class="br0">&#40;</span><span class="re0">$str</span>, <span class="re0">$lenght_max</span>, <span class="re0">$with_abbr</span>=<span class="kw2">true</span><span class="br0">&#41;</span> <span class="br0">&#123;</span>
	<span class="kw1">if</span><span class="br0">&#40;</span><a href="http://www.php.net/strlen"><span class="kw3">strlen</span></a><span class="br0">&#40;</span><span class="re0">$str</span><span class="br0">&#41;</span> &gt; <span class="re0">$lenght_max</span><span class="br0">&#41;</span> <span class="br0">&#123;</span>
		<span class="kw1">if</span><span class="br0">&#40;</span><span class="re0">$with_abbr</span><span class="br0">&#41;</span> <span class="re0">$returned</span> = <span class="st0">'&lt;abbr title=&quot;'</span>.<span class="re0">$str</span>.<span class="st0">'&quot;&gt;'</span>;
		<span class="re0">$returned</span>.= <a href="http://www.php.net/substr"><span class="kw3">substr</span></a><span class="br0">&#40;</span><span class="re0">$str</span>, <span class="nu0">0</span>, <span class="br0">&#40;</span><span class="re0">$lenght_max</span><span class="nu0">-3</span><span class="br0">&#41;</span><span class="br0">&#41;</span>.<span class="st0">'...'</span>;
		<span class="kw1">if</span><span class="br0">&#40;</span><span class="re0">$with_abbr</span><span class="br0">&#41;</span> <span class="re0">$returned</span>.= <span class="st0">'&lt;/abbr&gt;'</span>;
	<span class="br0">&#125;</span>
	<span class="kw1">else</span> <span class="re0">$returned</span> = <span class="re0">$str</span>;
	<span class="kw1">return</span> <span class="re0">$returned</span>;
<span class="br0">&#125;</span></pre>
 
<p>html :</p>
<pre class="code xml"><span class="sc0">&lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Strict//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd&quot;&gt;</span>
<span class="sc3"><span class="re1">&lt;html</span> <span class="re0">xmlns</span>=<span class="st0">&quot;http://www.w3.org/1999/xhtml&quot;</span> <span class="re0">xml:lang</span>=<span class="st0">&quot;fr&quot;</span><span class="re2">&gt;</span></span>
	<span class="sc3"><span class="re1">&lt;head<span class="re2">&gt;</span></span></span>
		<span class="sc3"><span class="re1">&lt;meta</span> <span class="re0">http-equiv</span>=<span class="st0">&quot;Content-Type&quot;</span> <span class="re0">content</span>=<span class="st0">&quot;text/html; charset=ISO-8859-1&quot;</span> <span class="re2">/&gt;</span></span>
		<span class="sc3"><span class="re1">&lt;title<span class="re2">&gt;</span></span></span>o7a.net - Home page<span class="sc3"><span class="re1">&lt;/title<span class="re2">&gt;</span></span></span>
		<span class="sc3"><span class="re1">&lt;link</span> <span class="re0">rel</span>=<span class="st0">&quot;stylesheet&quot;</span> <span class="re0">type</span>=<span class="st0">&quot;text/css&quot;</span> <span class="re0">href</span>=<span class="st0">&quot;http://o7a.net/css/main.css&quot;</span> <span class="re0">media</span>=<span class="st0">&quot;screen&quot;</span> <span class="re2">/&gt;</span></span>
	<span class="sc3"><span class="re1">&lt;/head<span class="re2">&gt;</span></span></span>
	<span class="sc3"><span class="re1">&lt;body<span class="re2">&gt;</span></span></span>
...
	<span class="sc3"><span class="re1">&lt;/body<span class="re2">&gt;</span></span></span>
<span class="sc3"><span class="re1">&lt;/html<span class="re2">&gt;</span></span></span></pre>
 
<p>If you don't want the syntax colorization :</p>
<pre class="code">//STRONG EMPHASIS
if($this-&gt;getParam('active_strongEmphasis')) {
	$content = preg_replace_callback('#\'\'\'(.*)\'\'\'#mU',array(&amp;$this,'transformStrongEmphasis'),$content);
}
&nbsp;
//EMPHASIS
if($this-&gt;getParam('active_emphasis')) {
	$content = preg_replace_callback('#\'\'(.*)\'\'#mU',array(&amp;$this,'transformEmphasis'),$content);
}</pre>
 
<h4>Attributes</h4>
 
<p>o7aCode allows to insert many html markups, but their parametrages keep hitherto strong restricted... How to fill in the links <code>title</code> attributes ? How to give images an alignment ?</p>
 
<p>It's possible to fill in <em>all attributes</em> of <em>all markups</em> seen yet : images, links and titles, as well as emphasis markups, lists or even paragraphs !</p>
 
<p>You can &ndash;firstly&ndash; fill in predefined attributes &ndash;with a certain order&ndash;. For that, you must precede them by two colons. For example, the <code>title</code> attribute of <a href="http://www.example.net" title="fictive link for the example">this link</a> is defined.</p>
 
<p>Predefining all attributes would be tedious because the order is imposed, which restrict the predefinition to the most used attributes. For other attributes, the syntax is a bit different : you must precede the attribution by two semicolons, put the attribute entitled, then its value (separating the two by one or more non-alphanumeric characters). For example, the <code>id</code> attribute to <a href="http://www.example.net" id="link1">this link</a> is defined.</p>
 
<p>You can obviously blend the two kind of attribution, the only order to respect is the predefined attributes one.</p>
 
<h5 id="id_for_thetitle"><em>All</em> markups</h5>
 
<p><img src="http://galeries.o7a.net/bertrand/mini/photos2/photo5.jpg" alt="Spanish railway station" class="right" /></p>
 
<p><em class="class_for_em">Emphasis</em>, <strong onclick="donothing()" class="class_for_strong">strong emphasis</strong>, <code class="class_for_code">code</code>, etc ...</p>
 
<p><a href="http://www.example.net" title="title" lang="en" id="id_for_thelink">a link</a>, <a href="http://www.example.net" class="class_for_link">http://www.example.net</a> ; <abbr title="abbreviation" xml:lang="en">abbr</abbr> ...</p>
 
<p class="class_for_paragraph">To give attributes to a paragraph, You only must define them at the end of it.</p>
 
<div class="clearer"></div>
 
<p>For lists :</p>
 
<ul class="a_class_for_ul">
	<li class="class_for_li">Here's a <abbr title="list item" xml:lang="en"><code>li</code></abbr> with attributes,</li>
	<li id="id_for_theli">and another one with which are defined the <code>ul</code> attributes,</li>
	<li>It's the two <code>]</code> which separate attributes of the <code>li</code> and the <code>ul</code>.</li>
</ul>
 
<hr class="class_for_hr" />
 
 
 
<blockquote cite="me" lang="en">
<p>Quotation in block...</p>
 
<p>blabla...</p>
</blockquote>
<pre class="code css">h1 <span class="br0">&#123;</span>
	<span class="kw1">border-bottom</span>: <span class="re3">1px</span> <span class="re0">#c7d6df</span> <span class="kw2">solid</span>;
	<span class="kw1">text-align</span>: <span class="kw1">right</span>;
	<span class="kw1">margin</span>: <span class="nu0">0</span>;
	<span class="kw1">margin-bottom</span>: <span class="nu0">-1</span><span class="re1"><span class="re3">.5em</span></span>;
<span class="br0">&#125;</span>
a <span class="br0">&#123;</span>
	<span class="kw1">text-decoration</span>: <span class="kw2">none</span>;
	<span class="kw1">color</span>: <span class="re0">#003c9c</span>;
<span class="br0">&#125;</span>
a<span class="re2">:hover</span> <span class="br0">&#123;</span>
	<span class="kw1">text-decoration</span>: <span class="kw2">underline</span>;
<span class="br0">&#125;</span>
...</pre>
 
<h3>Alternatives</h3>
 
<h4>ponctual deactivation</h4>
 
<p>Sometimes, some characters are interpreted whereas we don't want. To deactivate the interpretation of one character, you only have to precede it by a backslash ; To display a backslash, deactivate it with another backslash : \. Problems between emphasis and apostrophes often happen (three apostrophes are interpreted as strong emphasis), the solution is to deactivate the apostrophe by a backslash.</p>
 
<h4>o7aCode and html</h4>
 
<p>If with all this syntax possibilities you don't obtain what you want, inserting html is always possible (a block non-translated), without having to write the whole document in html ! For that, put your html code between ##&gt; and &lt;##.</p>
 
 
 
<p>Here's some html...</p>
 
 
<h3>Extensions</h3>
 
<p>The syntax is very improvable and wait for being improved ; For example, I've created an extension allowing to quickly make links to wikipedia articles :</p>
 
<ul>
	<li><a href="http://fr.wikipedia.org/wiki/Hypertext_Markup_Language" title="Article de Wikipedia sur &quot;Hypertext_Markup_Language&quot;">Article about <abbr title="Hypertext Markup Language" xml:lang="en">html</abbr></a></li>
	<li><a href="http://fr.wikipedia.org/wiki/html" title="Article de Wikipedia sur &quot;html&quot;">Hypertext Markup Language</a></li>
	<li><a href="http://fr.wikipedia.org/wiki/html" title="Article de Wikipedia sur &quot;html&quot;">html</a></li>
	<li><a href="http://fr.wikipedia.org/wiki/html" title="Article de Wikipedia sur &quot;html&quot;">html</a></li>
</ul>
 
<p>Don't hesitate to suggest more extensions !</p>