Options of articles formatting

Examples of various options of articles' content formatting.

Content:

1. Text formatting
2. Quotations and blocs
3. Titles
4. Source codes
5. Pictures
6. Tables
7. Numbered and bulleted lists
8. Inserted video

Text formatting

For the common texts can be applied basic formatting.

You can also align the text bloc right.

Or align it to the centre.

It's possible to color and highlight any text.

If you need to deliberately use a little bit smaller font, for example for the popular less readable footnotes, just select a part of a text and set Smaller font style.

Quotations and blocs

Ordinary quoted text bloc

Quotation but set as a tip

It's also possible to set a part of a text as a quotation inside a normal text by selecting a part of a text and setting Line quotation style.

Highlighted text bloc

Titles

First class title

Technically it is h2, h1 is the title of the article itself.

Second class title

​Third class title

These are all of the used titles. Nobody goes for titles of a lesser class.

Source codes

The samples of several source codes. Their color style will be visible on the website which uses the Beyond application.

onWindowLoad.push(function() {

    function getbarsHeight() {
        return $('.page-header').outerHeight() + $('.page-footer').outerHeight();
    }

    function getWindowHeight() {
        return $(window).outerHeight();
    }

    function resizeIndex() {
        $('.page-content-index').css({'min-height': getWindowHeight() - getbarsHeight() + 'px'});
    }

    function update() {
        window.requestAnimationFrame(update);
        resizeIndex();
    }

    window.requestAnimationFrame(update);
});

namespace Edge\KB\Dev\Robo;

trait CITasks
{
    private $buildDir = './build/logs';

    /** Run CI - rebuild db, phpqa, tests */
    public function ci()
    {
        $this->init();
        $this->dbRebuild(['isDropped' => 'y']);
        $this->say("db-rebuild-worker");
        $this->ciPhpqa();
        $this->ciPhpunit();
        $this->ciBehat();
    }

    public function ciPhpqa()
    {
        $this->taskExec('phpqa')
            ->option('analyzedDir', './src')
            ->option('buildDir', $this->buildDir)
            ->option('report')
            ->run();
    }

    public function ciPhpunit()
    {
        $this->taskExec('bin/phpunit')
            ->option('log-junit', "{$this->buildDir}/junit.xml")
            ->option('testdox-text', "{$this->buildDir}/testdox.txt")
            ->option('testdox-html', "{$this->buildDir}/testdox.html")
            ->run();
    }

    public function ciBehat()
    {
        $this->taskExec('bin/behat')
            ->option('format', "junit")
            ->option('out', "{$this->buildDir}/behat")
            ->option('format', "pretty")
            ->option('out', "std")
            ->run();
    }
}

And what if a piece of a source code steals in a current text?$this->_exec('git fetch && git fetch --tags'); 

Pictures

They can stretch over a whole web page.

Pictures can also be aligned to the sides. This again is an option which is visible on the web page only.

It's also possible to set a description of the picture - there's a checkbox in the panel for picture input or in its setting. The description can be then edited right below the picture itself.

Tables

Numbered and bulleted lists

Bulleted lists

• This is a usual bulleted list
• and here follow inner bullets
  • And one bullet
  • followed by second
  • all concluded by the third.
• And what more
• Here is another couple of bullets

Numbered lists

1. This is a usual numbered list
2. and here follow other bullets
   1. And one bullet
   2. followed by another
   3. third bullet follows the second.
3. And what more
   1. This is a usual numbered list
   2. and here follow other bullets
      1. And one bullet
      2. followed by another
      3. third bullet follows the second.
   3. And what more
   4. Here is another couple of bullets
4. Here is another couple of bullets

Numbered list with a global counter

1. awdnawd kawd
2. adwodh awda
3. aodwhd oahw d
4. awdhihsknvojae

Multilevel seznam

1. This is a usual numbered list
2. and here follow other bullets
   1. And one bullet
   2. followed by another
   3. third bullet follows the second
3. And what more
   1. This is a usual numbered list
   2. and here follow inner bullets
      1. And one bullet
      2. followed by another
      3. third bullet follows the second
   3. And what more
   4. Here is another couple of bullets
4. Here is another couple of bullets

Number circle list

1. This is a usual numbered list
2. and here follow inner bullets
   1. And one bullet
   2. followed by another
   3. third bullet follows the second
3. And what more
   1. This is a usual numbered list
   2. and here follow inner bullets
      1. And one bullet
      2. followed by another
      3. third bullet follows the second
   3. And what more
   4. Here is another couple of bullets
4. Here is another couple of bullets

Inserted video