Amel | Language introduction<br>

I. Introduction

A. What is the Amel language?

II. Language features

A. Creating elements

1. Simple exemple
2. Classes and ids
3. Attributes
4. Element inclusion

B. Applying CSS
C. Commenting the code

1. Single line comments
2. Multiple line comments

D. Formatting output
E. Constants: Definition and usage
F. Experimental features

1. The extern keyword

I. Introduction

A. What is the Amel language?

Amel stands for A... Markup Extended Language. It aims at speeding HTML code writing by improving code readability and providing powerful yet simple to use mechanisms. The language allows to run external code written in other languages. Markdown syntax is also supported to allow fast text styling.

Here is how an Amel code compares to a classical HTML code:

HTML

<div id="surheader">
<div class="conteneur_haut">
<p class="gauche">
<a href="/" class="actif">Le Monde</a>
<a href="http://www.telerama.fr/" target="_blank">Télérama</a>
<a href="http://www.lavie.fr/" target="_blank">La Vie</a>
</p>
</div>
</div>

Amel

div.conteneur_haut(
    p.gauche(
        a.actif[href="/"](
            Le Monde
        )
        a[href="http://www.telerama.fr/",target="_blank"](
            Telerama
        )
        a[href="http://www.lavie.fr/",target="_blank"](
            La Vie
        )
     )
)

II. Language features

So, what can we do exactly with this language? Here is an overview of the different features.

II. A. Creating elements

The Amel language syntax was designed in a way that people experienced in HTML wouldn't have to learn a new language. Creating element is therefore very straightforward.

1. Simple exemple

Here is a quick example, showing how to create a simple div:

Amel

div(
Hello, world!
)

Result

Hello, world!

The previous lines define a new div element with the “Hello, world!” text content. See how we create a new div element by writing the name of the HTML tag followed by an opening parenthesis. The parenthesis block contains the content of the element, here “Hello, world!”.

2. Classes and ids

Using the same syntax as css selectors, we can add classes or ids to our HTML elements. It goes like this:

Amel

div.class1.class2#id(
Hello, world!
)

Result

Hello, world!

In this exemple, we create a new div with two classes ( class1 and class2 ) and an id ( id ). See how we used the intuitive css rule syntax.

3. Attributes

HTML element attributes can be set using the following syntax:

Amel

element[attribute1="value1",attribute2="value2"](
Element value
)

Here is more concrete exemple with a link:

Amel

a[href="http://amel.org"](
Amel website
)

Result

Amel website

4. Element inclusion

Including elements as children of other elements is straightforward in Amel. Here is a quick exemple:

Amel

style(
    span.red {
        color:red;
    }
    span.green {
        color: green;
    }
    span.blue {
        color: blue;
    }
)

This text is black.
span.red(
    This one is red.
    span.green(
        This one is green.
        span.blue(
            This one is blue.
        )
    )
)

Result

This text is black.
This one is red.
This one is green.
This one is blue.

B. Applying CSS

One can apply css rules in Amel using the following syntax.

Amel

// Style element
style(
    div.red_class {
        color: red;
        font-weight: 500;
    }
)

// Div element
div.red_class(
    Hello, world!
)

Result

Hello, world!

C. Commenting the code

1. Single line comments

Amel supports simple line comments using //.

Amel

Here is some normal text.
// This text is commented

Result

Here is some normal text.

2. Multiple line comments

Multiple line comments are also supported with / ** / . See how lines aligned in the the Amel comments are aligned as well in the HTML output.

Amel

Here is some normal text.
/* Here is a
multiple line
comment -->

Result

Here is some normal text.

D. Formatting output

The Amel language supports markdown text formatting such as italic, bold, ~~stroke~~, or a combination of those.

Amel

This is _italic_ text. Here is some __bold__ text. Some --stroke-- text.
Finally, here is a ___--combination--___ of those.

Result

This is italic text. Here is some bold text. Some ~~stroke~~ text.
Finally, here is a ~~combination~~ of those.

E. Constants: Definition and usage

In Amel language, constants can be defined and recalled with the following syntax:

Amel

@title = "Main title"
The title of the page is: @title.

Result

The title of the page is: Main title.

Any word preceded by a @ will be considered either as a constant use or a constant definition. If a constant is undefined, it will be prepended with a ? symbol in the use context.

Amel

The constant @text is undefined.

Result

The constant ?text is undefined.

F. Experimental features

1. The extern keyword

The extern keyword let users execute a section of code in an external language and include the result of the execution into Amel code. At the moment, only Javascript is supported. In order to use this feature, the user includes javascript in an extern amel block and return an object which properties will be included as constants in the amel environment.

Here is an exemple of text rendered through an external language with the extern keyword.

Amel

@extern:(
    var radius = 2;
    var surface = Math.PI * Math.pow(radius,2);
    return { surface: surface * 2, radius: radius };
)
The surface of a circle with a radius of @radius is @surface.

Result

The surface of a circle with a radius of 2 is 25.132741228718345.

The javascript code has to return an object containing the variables to import in the current environment. Here, we calculate the surface of a circle with a radius of 2.

Here is another exemple of the extern keyword listing connected volumes on the current system:

Amel

@extern:(
    var fs = require( "fs" );
    var files = fs.readdirSync( "/Volumes" );
    return { file: files.join( "\n- " ), amount: files.length };
)
There are currently @amount storage devices on this computer:
- @file

Result

There are currently 4 storage devices on this computer:
- BOOTCAMP
- Backup
- Home
- MobileBackups