Minor updates

2020-08-24 12:29:09 +03:00
parent ae44dcb68f
commit c0246101f7
7 changed files with 301 additions and 340 deletions
--- a/docs/1.0/getting-started/flask-deploy-on-heroku.html
+++ b/docs/1.0/getting-started/flask-deploy-on-heroku.html
@ -678,10 +678,10 @@


        <main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
-          <h1 class="bd-title" id="content">How to deploy Flask on Heroku</h1>
-          <p class="bd-lead"></p>
-          <h1 id="flask-deploy-on-heroku"><a href="https://palletsprojects.com/p/flask/">Flask</a> Deploy on <a href="https://www.heroku.com/">Heroku</a></h1>
+        <h1 class="bd-title" id="content">How to deploy Flask on Heroku</h1>

+<p class="bd-lead"></p>
+<hr />
 <p>This page explains how to deploy a <a href="https://www.palletsprojects.com/p/flask/">Flask</a> application on Heroku, the popular deployment platform.</p>

 <p><br /></p>
@ -795,8 +795,7 @@ Heroku is a cloud-based, fully-managed platform as a service (Paas) for building
 <p>Heroku apps include a Procfile that specifies the commands that are executed by the app on startup.
 As specified in the <a href="https://devcenter.heroku.com/articles/procfile">official docs</a>, the <em>Procfile</em> is always a simple text file that is named Procfile without a file extension.</p>

-<pre><code class="language-txt">web: gunicorn run:app --log-file=-
-</code></pre>
+<figure class="highlight"><pre><code class="language-html" data-lang="html">web: gunicorn run:app --log-file=-</code></pre></figure>

 <p>For our sample, <code class="highlighter-rouge">gunicorn</code> is called with <code class="highlighter-rouge">run:app</code> argument.</p>

@ -813,27 +812,26 @@ As specified in the <a href="https://devcenter.heroku.com/articles/procfile">off

 <p>The full command list, executed on our sample project.</p>

-<div class="language-bash highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nv">$ </span><span class="c"># Clone the source code:</span>
-<span class="nv">$ </span>git clone https://github.com/app-generator/boilerplate-code-flask.git
-<span class="nv">$ </span><span class="nb">cd </span>boilerplate-code-flask
+<figure class="highlight"><pre><code class="language-html" data-lang="html">$ # Clone the source code:
+$ git clone https://github.com/app-generator/boilerplate-code-flask.git
+$ cd boilerplate-code-flask
+$
+$ # Check Heroku CLI is installed
+$ heroku -v
+heroku/7.25.0 win32-x64 node-v12.13.0 # <span class="nt">&lt;--</span> <span class="na">All</span> <span class="na">good</span>
 <span class="err">$</span>
-<span class="nv">$ </span><span class="c"># Check Heroku CLI is installed</span>
-<span class="nv">$ </span>heroku <span class="nt">-v</span>
-heroku/7.25.0 win32-x64 node-v12.13.0 <span class="c"># &lt;-- All good</span>
+<span class="err">$</span> <span class="na">#</span> <span class="na">Check</span> <span class="na">Heroku</span> <span class="na">CLI</span> <span class="na">is</span> <span class="na">installed</span>
+<span class="err">$</span> <span class="na">heroku</span> <span class="na">login</span>
+<span class="err">$</span> <span class="na">#</span> <span class="na">this</span> <span class="na">command</span> <span class="na">will</span> <span class="na">open</span> <span class="na">a</span> <span class="na">browser</span> <span class="na">window</span> <span class="na">-</span> <span class="na">click</span> <span class="na">the</span> <span class="na">login</span> <span class="na">button</span> <span class="err">(</span><span class="na">in</span> <span class="na">browser</span><span class="err">)</span>
 <span class="err">$</span>
-<span class="nv">$ </span><span class="c"># Check Heroku CLI is installed</span>
-<span class="nv">$ </span>heroku login
-<span class="nv">$ </span><span class="c"># this command will open a browser window - click the login button (in browser)</span>
+<span class="err">$</span> <span class="na">#</span> <span class="na">Create</span> <span class="na">the</span> <span class="na">Heroku</span> <span class="na">project</span>
+<span class="err">$</span> <span class="na">heroku</span> <span class="na">create</span>
 <span class="err">$</span>
-<span class="nv">$ </span><span class="c"># Create the Heroku project</span>
-<span class="nv">$ </span>heroku create
+<span class="err">$</span> <span class="na">#</span> <span class="na">Trigger</span> <span class="na">the</span> <span class="na">LIVE</span> <span class="na">deploy</span>
+<span class="err">$</span> <span class="na">git</span> <span class="na">push</span> <span class="na">heroku</span> <span class="na">master</span>
 <span class="err">$</span>
-<span class="nv">$ </span><span class="c"># Trigger the LIVE deploy</span>
-<span class="nv">$ </span>git push heroku master
-<span class="err">$</span>
-<span class="nv">$ </span><span class="c"># Open the LIVE app in browser</span>
-<span class="nv">$ </span>heroku open
-</code></pre></div></div>
+<span class="err">$</span> <span class="na">#</span> <span class="na">Open</span> <span class="na">the</span> <span class="na">LIVE</span> <span class="na">app</span> <span class="na">in</span> <span class="na">browser</span>
+<span class="err">$</span> <span class="na">heroku</span> <span class="na">open</span></code></pre></figure>

 <p>At this point, you should be able to visit the app in the browser.</p>

--- a/docs/1.0/getting-started/getting-started-flask.html
+++ b/docs/1.0/getting-started/getting-started-flask.html
@ -683,10 +683,12 @@
        

        <main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
-          <h1 class="bd-title" id="content">Black Dashboard Flask</h1>
-          <p class="bd-lead"></p>
-          <h1 id="black-dashboard-flask"><a href="https://www.creative-tim.com/product/black-dashboard-flask">Black Dashboard Flask</a></h1>
-
+          <h1 class="bd-title" id="content">
+            <a href="https://www.creative-tim.com/product/black-dashboard-flask">Black Dashboard Flask</a>
+          </h1>
+          
+<p class="bd-lead"></p>
+<hr />
 <p>Black Dashboard Black is a free Bootstrap 4 Admin Template for Django - Features:</p>

 <ul>
@ -702,9 +704,9 @@
 </blockquote>

 <ul>
-  <li><a href="https://www.creative-tim.com/product/black-dashboard-flask">Black Dashboard Flask</a> - product page</li>
-  <li><a href="https://www.creative-tim.com/live/black-dashboard-flask">Black Dashboard Flask Demo</a> - LIVE App, default login credentials ** <em>test / pass</em> **</li>
-  <li><a href="https://github.com/creativetimofficial/black-dashboard-flask/">Black Dashboard Flask Sources</a> - MIT License, released on Github</li>
+  <li><a target="_blank" href="https://www.creative-tim.com/product/black-dashboard-flask">Black Dashboard Flask</a> - product page</li>
+  <li><a target="_blank" href="https://www.creative-tim.com/live/black-dashboard-flask">Black Dashboard Flask Demo</a> - LIVE App, default login credentials ** <em>test / pass</em> **</li>
+  <li><a target="_blank" href="https://github.com/creativetimofficial/black-dashboard-flask/">Black Dashboard Flask Sources</a> - MIT License, released on Github</li>
  <li>Tutorials
    <ul>
      <li><a href="./setup-centos-for-development.html">Set up <code class="highlighter-rouge">CentOS</code> for development</a></li>
@ -755,17 +757,9 @@ Classified as a microframework, Flask is written in Python and it does not requi
  <p>Check <a href="https://www.python.org/">Python</a> version (using the terminal)</p>
 </blockquote>

-<div class="language-bash highlighter-rouge">
-  <div class="highlight">
-    <pre class="highlight">
-<code>
-<span class="nv">$ </span><span class="c"># Check Python version</span>
-<span class="nv">$ </span>python <span class="nt">--version</span>
-Python 3.7.2 <span class="c"># &lt;--- All good</span>
-</code>
-    </pre>
-  </div>
-</div>
+<figure class="highlight"><pre><code class="language-html" data-lang="html">  $ # Check Python version
+  $ python --version
+  Python 3.7.2 # <span class="nt">&lt;---</span> <span class="na">All</span> <span class="na">good</span></code></pre></figure>

 <p><br /></p>

@ -773,10 +767,9 @@ Python 3.7.2 <span class="c"># &lt;--- All good</span>
  <p>Check <a href="https://git-scm.com/">GIT</a> command tool (using the terminal)</p>
 </blockquote>

-<div class="language-bash highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nv">$ </span><span class="c"># Check git</span>
-<span class="nv">$ </span>git <span class="nt">--version</span>
-<span class="nv">$ </span>git version 2.10.1.windows.1 <span class="c"># &lt;--- All good</span>
-</code></pre></div></div>
+<figure class="highlight"><pre><code class="language-html" data-lang="html">$ # Check git
+$ git --version
+$ git version 2.10.1.windows.1 # <span class="nt">&lt;---</span> <span class="na">All</span> <span class="na">good</span></code></pre></figure>

 <p><br /></p>

@ -808,36 +801,35 @@ Python 3.7.2 <span class="c"># &lt;--- All good</span>
  <p><strong>Change the current directory</strong> to <code class="highlighter-rouge">source code</code> directory</p>
 </blockquote>

-<div class="language-bash highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nv">$ </span><span class="c"># Make sure you are running the commands INSIDE source code directory</span>
-<span class="err">$</span>
-<span class="nv">$ </span><span class="c"># Create and activate a Virtualenv (Unix based systems)</span>
-<span class="nv">$ </span>virtualenv <span class="nb">env</span>
-<span class="nv">$ </span><span class="nb">source env</span>/bin/activate
-<span class="err">$</span>
-<span class="nv">$ </span><span class="c"># Create and activate a Virtualenv (Windows based systems)</span>
-<span class="nv">$ </span><span class="c"># virtualenv env</span>
-<span class="nv">$ </span><span class="c"># .\env\Scripts\activate</span>
-<span class="err">$</span>
-<span class="nv">$ </span><span class="c"># Install requirements</span>
-<span class="nv">$ </span>pip3 <span class="nb">install</span> <span class="nt">-r</span> requirements.txt
-<span class="err">$</span>
-<span class="nv">$ </span><span class="c"># Set the FLASK_APP environment variable</span>
-<span class="nv">$ </span><span class="o">(</span>Unix/Mac<span class="o">)</span> <span class="nb">export </span><span class="nv">FLASK_APP</span><span class="o">=</span>run.py
-<span class="nv">$ </span><span class="o">(</span>Windows<span class="o">)</span> <span class="nb">set </span><span class="nv">FLASK_APP</span><span class="o">=</span>run.py
-<span class="nv">$ </span><span class="o">(</span>Powershell<span class="o">)</span> <span class="nv">$env</span>:FLASK_APP <span class="o">=</span> <span class="s2">".</span><span class="se">\r</span><span class="s2">un.py"</span>
-<span class="err">$</span>
-<span class="nv">$ </span><span class="c"># Set up the DEBUG environment</span>
-<span class="nv">$ </span><span class="c"># (Unix/Mac) export FLASK_ENV=development</span>
-<span class="nv">$ </span><span class="c"># (Windows) set FLASK_ENV=development</span>
-<span class="nv">$ </span><span class="c"># (Powershell) $env:FLASK_ENV = "development"</span>
-<span class="err">$</span>
-<span class="nv">$ </span><span class="c"># Run the application</span>
-<span class="nv">$ </span><span class="c"># --host=0.0.0.0 - expose the app on all network interfaces (default 127.0.0.1)</span>
-<span class="nv">$ </span><span class="c"># --port=5000    - specify the app port (default 5000)  </span>
-<span class="nv">$ </span>flask run <span class="nt">--host</span><span class="o">=</span>0.0.0.0 <span class="nt">--port</span><span class="o">=</span>5000
-<span class="err">$</span>
-<span class="nv">$ </span><span class="c"># Access the app in browser: http://127.0.0.1:5000/</span>
-</code></pre></div></div>
+<figure class="highlight"><pre><code class="language-html" data-lang="html">$ # Make sure you are running the commands INSIDE source code directory
+$
+$ # Create and activate a Virtualenv (Unix based systems)
+$ virtualenv env
+$ source env/bin/activate
+$
+$ # Create and activate a Virtualenv (Windows based systems)
+$ # virtualenv env
+$ # .\env\Scripts\activate
+$
+$ # Install requirements
+$ pip3 install -r requirements.txt
+$
+$ # Set the FLASK_APP environment variable
+$ (Unix/Mac) export FLASK_APP=run.py
+$ (Windows) set FLASK_APP=run.py
+$ (Powershell) $env:FLASK_APP = ".\run.py"
+$
+$ # Set up the DEBUG environment
+$ # (Unix/Mac) export FLASK_ENV=development
+$ # (Windows) set FLASK_ENV=development
+$ # (Powershell) $env:FLASK_ENV = "development"
+$
+$ # Run the application
+$ # --host=0.0.0.0 - expose the app on all network interfaces (default 127.0.0.1)
+$ # --port=5000    - specify the app port (default 5000)  
+$ flask run --host=0.0.0.0 --port=5000
+$
+$ # Access the app in browser: http://127.0.0.1:5000/</code></pre></figure>

 <p>At this point, we can visit the app in the browser <strong><code class="highlighter-rouge">http://127.0.0.1:5000/</code></strong>.
 By default, the app will redirect guest users to the login page. To access the private pages:</p>
@ -854,24 +846,25 @@ By default, the app will redirect guest users to the login page. To access the p

 <p>Starter uses a simple codebase (no Blueprints) with a structure presented bellow:</p>

-<div class="language-bash highlighter-rouge"><div class="highlight"><pre class="highlight"><code>&lt; PROJECT ROOT <span class="o">&gt;</span>
+<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;</span> <span class="nt">PROJECT</span> <span class="na">ROOT</span> <span class="nt">&gt;</span>
   |
-   |-- app/                      <span class="c"># Implements app logic</span>
-   |    |-- base/                <span class="c"># Base Blueprint - handles the authentication</span>
-   |    |-- home/                <span class="c"># Home Blueprint - serve UI Kit pages</span>
+   |-- app/                      # Implements app logic
+   |    |-- base/                # Base Blueprint - handles the authentication
+   |    |-- home/                # Home Blueprint - serve UI Kit pages
   |    |
-   |   __init__.py               <span class="c"># Initialize the app</span>
+   |   __init__.py               # Initialize the app
   |
-   |-- requirements.txt          <span class="c"># Development modules - SQLite storage</span>
-   |-- requirements-mysql.txt    <span class="c"># Production modules  - Mysql DMBS</span>
-   |-- requirements-pqsql.txt    <span class="c"># Production modules  - PostgreSql DMBS</span>
+   |-- requirements.txt          # Development modules - SQLite storage
+   |-- requirements-mysql.txt    # Production modules  - Mysql DMBS
+   |-- requirements-pqsql.txt    # Production modules  - PostgreSql DMBS
   |
-   |-- .env                      <span class="c"># Inject Configuration via Environment</span>
-   |-- config.py                 <span class="c"># Set up the app</span>
-   |-- run.py                    <span class="c"># Start the app - WSGI gateway</span>
+   |-- .env                      # Inject Configuration via Environment
+   |-- config.py                 # Set up the app
+   |-- run.py                    # Start the app - WSGI gateway
   |
-   |-- <span class="k">************************************************************************</span>
-</code></pre></div></div>
+   |-- ************************************************************************
+
+  </code></pre></figure>

 <p><br /></p>

@ -897,22 +890,20 @@ By default, the app will redirect guest users to the login page. To access the p
  <p><strong><code class="highlighter-rouge">.env</code></strong> (saved in the root of the project)</p>
 </blockquote>

-<div class="language-bash highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c"># File: `.env`</span>
+<figure class="highlight"><pre><code class="language-html" data-lang="html"># File: `.env`

-<span class="nv">DEBUG</span><span class="o">=</span>True              <span class="c"># Enable/Disable the development environment</span>
+DEBUG=True              # Enable/Disable the development environment

-<span class="nv">SECRET_KEY</span><span class="o">=</span>S3cr3t_Key   <span class="c"># The Key used by Flask to encrypt session information</span>
+SECRET_KEY=S3cr3t_Key   # The Key used by Flask to encrypt session information

-<span class="c"># Database production settings (If DEBUG=False)</span>
+# Database production settings (If DEBUG=False)

-<span class="nv">DB_ENGINE</span><span class="o">=</span>postgresql    <span class="c"># DBMS</span>
-<span class="nv">DB_NAME</span><span class="o">=</span>appseed-flask   <span class="c"># Database Name</span>
-<span class="nv">DB_HOST</span><span class="o">=</span>localhost       <span class="c"># Database Host</span>
-<span class="nv">DB_PORT</span><span class="o">=</span>5432            <span class="c"># Database Port</span>
-<span class="nv">DB_USERNAME</span><span class="o">=</span>appseed     <span class="c"># DB Username</span>
-<span class="nv">DB_PASS</span><span class="o">=</span>pass            <span class="c"># DB Password</span>
-
-</code></pre></div></div>
+DB_ENGINE=postgresql    # DBMS
+DB_NAME=appseed-flask   # Database Name
+DB_HOST=localhost       # Database Host
+DB_PORT=5432            # Database Port
+DB_USERNAME=appseed     # DB Username
+DB_PASS=pass            # DB Password</code></pre></figure>

 <p><br /></p>

@ -920,16 +911,15 @@ By default, the app will redirect guest users to the login page. To access the p
  <p><strong><code class="highlighter-rouge">run.py</code></strong> (simplified version)</p>
 </blockquote>

-<div class="language-python highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1"># File: run.py
-</span>
-<span class="n">DEBUG</span> <span class="o">=</span> <span class="n">config</span><span class="p">(</span><span class="s">'DEBUG'</span><span class="p">,</span> <span class="n">default</span><span class="o">=</span><span class="bp">True</span><span class="p">)</span>
+<figure class="highlight"><pre><code class="language-html" data-lang="html"># File: run.py

-<span class="c1"># Create the WSGI app, using the app factory pattern
-</span><span class="n">app</span> <span class="o">=</span> <span class="n">create_app</span><span class="p">(</span> <span class="n">app_config</span> <span class="p">)</span>
+DEBUG = config('DEBUG', default=True)

-<span class="c1"># Migrate automaticaly the app using Flask Migrate library
-</span><span class="n">Migrate</span><span class="p">(</span><span class="n">app</span><span class="p">,</span> <span class="n">db</span><span class="p">)</span>
-</code></pre></div></div>
+# Create the WSGI app, using the app factory pattern
+app = create_app( app_config )
+
+# Migrate automaticaly the app using Flask Migrate library
+Migrate(app, db)</code></pre></figure>

 <p><br /></p>

@ -937,37 +927,36 @@ By default, the app will redirect guest users to the login page. To access the p
  <p><strong><code class="highlighter-rouge">app/__init__.py</code></strong> (simplified version)</p>
 </blockquote>

-<div class="language-python highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1"># File: app/__init__.py
-</span>
-<span class="n">db</span>            <span class="o">=</span> <span class="n">SQLAlchemy</span><span class="p">()</span>        <span class="c1"># Invoke SQLAlchemy
-</span><span class="n">login_manager</span> <span class="o">=</span> <span class="n">LoginManager</span><span class="p">()</span>      <span class="c1"># Invoke Login Manager
-</span>
-<span class="k">def</span> <span class="nf">register_extensions</span><span class="p">(</span><span class="n">app</span><span class="p">):</span>
-    <span class="n">db</span><span class="p">.</span><span class="n">init_app</span><span class="p">(</span><span class="n">app</span><span class="p">)</span>                <span class="c1"># Inject SQLAlchemy magic
-</span>    <span class="n">login_manager</span><span class="p">.</span><span class="n">init_app</span><span class="p">(</span><span class="n">app</span><span class="p">)</span>     <span class="c1"># Add Login Manager to the app
-</span>
-<span class="c1"># Register app blueprints: `base`, `home`
-</span><span class="k">def</span> <span class="nf">register_blueprints</span><span class="p">(</span><span class="n">app</span><span class="p">):</span>
-    <span class="k">for</span> <span class="n">module_name</span> <span class="ow">in</span> <span class="p">(</span><span class="s">'base'</span><span class="p">,</span> <span class="s">'home'</span><span class="p">):</span>
-        <span class="n">module</span> <span class="o">=</span> <span class="n">import_module</span><span class="p">(</span><span class="s">'app.{}.routes'</span><span class="p">.</span><span class="nb">format</span><span class="p">(</span><span class="n">module_name</span><span class="p">))</span>
-        <span class="n">app</span><span class="p">.</span><span class="n">register_blueprint</span><span class="p">(</span><span class="n">module</span><span class="p">.</span><span class="n">blueprint</span><span class="p">)</span>
+<figure class="highlight"><pre><code class="language-html" data-lang="html"># File: app/__init__.py

-<span class="c1"># Create the tables (automaticaly)
-</span><span class="k">def</span> <span class="nf">configure_database</span><span class="p">(</span><span class="n">app</span><span class="p">):</span>
+db            = SQLAlchemy()        # Invoke SQLAlchemy
+login_manager = LoginManager()      # Invoke Login Manager

-    <span class="o">@</span><span class="n">app</span><span class="p">.</span><span class="n">before_first_request</span>
-    <span class="k">def</span> <span class="nf">initialize_database</span><span class="p">():</span>
-        <span class="n">db</span><span class="p">.</span><span class="n">create_all</span><span class="p">()</span>
+def register_extensions(app):
+    db.init_app(app)                # Inject SQLAlchemy magic
+    login_manager.init_app(app)     # Add Login Manager to the app

-<span class="c1"># Create the WSGI app using the factory pattern
-</span><span class="k">def</span> <span class="nf">create_app</span><span class="p">(</span><span class="n">config</span><span class="p">):</span>
-    <span class="n">app</span> <span class="o">=</span> <span class="n">Flask</span><span class="p">(</span><span class="n">__name__</span><span class="p">,</span> <span class="n">static_folder</span><span class="o">=</span><span class="s">'base/static'</span><span class="p">)</span>
-    <span class="n">app</span><span class="p">.</span><span class="n">config</span><span class="p">.</span><span class="n">from_object</span><span class="p">(</span><span class="n">config</span><span class="p">)</span>
-    <span class="n">register_extensions</span><span class="p">(</span><span class="n">app</span><span class="p">)</span>
-    <span class="n">register_blueprints</span><span class="p">(</span><span class="n">app</span><span class="p">)</span>
-    <span class="n">configure_database</span><span class="p">(</span><span class="n">app</span><span class="p">)</span>
-    <span class="k">return</span> <span class="n">app</span>
-</code></pre></div></div>
+# Register app blueprints: `base`, `home`
+def register_blueprints(app):
+    for module_name in ('base', 'home'):
+        module = import_module('app.{}.routes'.format(module_name))
+        app.register_blueprint(module.blueprint)
+
+# Create the tables (automaticaly)
+def configure_database(app):
+
+    @app.before_first_request
+    def initialize_database():
+        db.create_all()
+
+# Create the WSGI app using the factory pattern
+def create_app(config):
+    app = Flask(__name__, static_folder='base/static')
+    app.config.from_object(config)
+    register_extensions(app)
+    register_blueprints(app)
+    configure_database(app)
+    return app</code></pre></figure>

 <p><br /></p>

@ -1000,40 +989,39 @@ By default, the app will redirect guest users to the login page. To access the p
  <p><strong>App / Base Blueprint</strong> structure</p>
 </blockquote>

-<div class="language-bash highlighter-rouge"><div class="highlight"><pre class="highlight"><code>&lt; PROJECT ROOT <span class="o">&gt;</span>
+<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;</span> <span class="nt">PROJECT</span> <span class="na">ROOT</span> <span class="nt">&gt;</span>
   |
   |-- app/
-   |    |-- home/                                <span class="c"># Home Blueprint - serve app pages (private area)</span>
-   |    |-- base/                                <span class="c"># Base Blueprint - handles the authentication</span>
+   |    |-- home/                                # Home Blueprint - serve app pages (private area)
+   |    |-- base/                                # Base Blueprint - handles the authentication
   |         |-- static/
-   |         |    |-- &lt;css, JS, images&gt;          <span class="c"># CSS files, Javascripts files</span>
+   |         |    |-- <span class="nt">&lt;css</span><span class="err">,</span> <span class="na">JS</span><span class="err">,</span> <span class="na">images</span><span class="nt">&gt;</span>          # CSS files, Javascripts files
   |         |
-   |         |-- templates/                      <span class="c"># Templates used to render pages</span>
+   |         |-- templates/                      # Templates used to render pages
   |              |
-   |              |-- includes/                  <span class="c">#</span>
-   |              |    |-- navigation.html       <span class="c"># Top menu component</span>
-   |              |    |-- sidebar.html          <span class="c"># Sidebar component</span>
-   |              |    |-- footer.html           <span class="c"># App Footer</span>
-   |              |    |-- scripts.html          <span class="c"># Scripts common to all pages</span>
+   |              |-- includes/                  #
+   |              |    |-- navigation.html       # Top menu component
+   |              |    |-- sidebar.html          # Sidebar component
+   |              |    |-- footer.html           # App Footer
+   |              |    |-- scripts.html          # Scripts common to all pages
   |              |
-   |              |-- layouts/                   <span class="c"># Master pages</span>
-   |              |    |-- base-fullscreen.html  <span class="c"># Used by Authentication pages</span>
-   |              |    |-- base.html             <span class="c"># Used by common pages</span>
+   |              |-- layouts/                   # Master pages
+   |              |    |-- base-fullscreen.html  # Used by Authentication pages
+   |              |    |-- base.html             # Used by common pages
   |              |
-   |              |-- accounts/                  <span class="c"># Authentication pages</span>
-   |                   |-- login.html            <span class="c"># Login page</span>
-   |                   |-- register.html         <span class="c"># Registration page</span>
+   |              |-- accounts/                  # Authentication pages
+   |                   |-- login.html            # Login page
+   |                   |-- register.html         # Registration page
   |
-   |-- requirements.txt                          <span class="c"># Development modules - SQLite storage</span>
-   |-- requirements-mysql.txt                    <span class="c"># Production modules  - Mysql DMBS</span>
-   |-- requirements-pqsql.txt                    <span class="c"># Production modules  - PostgreSql DMBS</span>
+   |-- requirements.txt                          # Development modules - SQLite storage
+   |-- requirements-mysql.txt                    # Production modules  - Mysql DMBS
+   |-- requirements-pqsql.txt                    # Production modules  - PostgreSql DMBS
   |
-   |-- .env                                      <span class="c"># Inject Configuration via Environment</span>
-   |-- config.py                                 <span class="c"># Set up the app</span>
-   |-- run.py                                    <span class="c"># Start the app - WSGI gateway</span>
+   |-- .env                                      # Inject Configuration via Environment
+   |-- config.py                                 # Set up the app
+   |-- run.py                                    # Start the app - WSGI gateway
   |
-   |-- <span class="k">************************************************************************</span>
-</code></pre></div></div>
+   |-- ************************************************************************</code></pre></figure>

 <p><br /></p>

@ -1041,30 +1029,29 @@ By default, the app will redirect guest users to the login page. To access the p
  <p><strong>App / Home Blueprint</strong> structure</p>
 </blockquote>

-<div class="language-bash highlighter-rouge"><div class="highlight"><pre class="highlight"><code>&lt; PROJECT ROOT <span class="o">&gt;</span>
+<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;</span> <span class="nt">PROJECT</span> <span class="na">ROOT</span> <span class="nt">&gt;</span>
   |
   |-- app/
-   |    |-- base/                     <span class="c"># Base Blueprint - handles the authentication</span>
-   |    |-- home/                     <span class="c"># Home Blueprint - serve app pages (private area)</span>
+   |    |-- base/                     # Base Blueprint - handles the authentication
+   |    |-- home/                     # Home Blueprint - serve app pages (private area)
   |         |
-   |         |-- templates/           <span class="c"># UI Kit Pages</span>
+   |         |-- templates/           # UI Kit Pages
   |              |
-   |              |-- index.html      <span class="c"># Default page</span>
-   |              |-- page-404.html   <span class="c"># Error 404 - mandatory page</span>
-   |              |-- page-500.html   <span class="c"># Error 500 - mandatory page</span>
-   |              |-- page-403.html   <span class="c"># Error 403 - mandatory page</span>
-   |              |-- <span class="k">*</span>.html          <span class="c"># All other HTML pages</span>
+   |              |-- index.html      # Default page
+   |              |-- page-404.html   # Error 404 - mandatory page
+   |              |-- page-500.html   # Error 500 - mandatory page
+   |              |-- page-403.html   # Error 403 - mandatory page
+   |              |-- *.html          # All other HTML pages
   |
-   |-- requirements.txt               <span class="c"># Development modules - SQLite storage</span>
-   |-- requirements-mysql.txt         <span class="c"># Production modules  - Mysql DMBS</span>
-   |-- requirements-pqsql.txt         <span class="c"># Production modules  - PostgreSql DMBS</span>
+   |-- requirements.txt               # Development modules - SQLite storage
+   |-- requirements-mysql.txt         # Production modules  - Mysql DMBS
+   |-- requirements-pqsql.txt         # Production modules  - PostgreSql DMBS
   |
-   |-- .env                           <span class="c"># Inject Configuration via Environment</span>
-   |-- config.py                      <span class="c"># Set up the app</span>
-   |-- run.py                         <span class="c"># Start the app - WSGI gateway</span>
+   |-- .env                           # Inject Configuration via Environment
+   |-- config.py                      # Set up the app
+   |-- run.py                         # Start the app - WSGI gateway
   |
-   |-- <span class="k">************************************************************************</span>
-</code></pre></div></div>
+   |-- ************************************************************************</code></pre></figure>

 <p><br /></p>

@ -1079,16 +1066,14 @@ By default, the app will redirect guest users to the login page. To access the p

 <p>This configuration becomes active if <code class="highlighter-rouge">.env</code> file has the <code class="highlighter-rouge">DEBUG</code> file set to <em>True</em></p>

-<div class="language-python highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1"># Development/Debug configuration
-</span>
-<span class="c1"># Set up the App SECRET_KEY
-</span><span class="n">SECRET_KEY</span> <span class="o">=</span> <span class="n">config</span><span class="p">(</span><span class="s">'SECRET_KEY'</span><span class="p">,</span> <span class="n">default</span><span class="o">=</span><span class="s">'S#perS3crEt_007'</span><span class="p">)</span>
+<figure class="highlight"><pre><code class="language-html" data-lang="html"># Development/Debug configuration

-<span class="c1"># This will create a file in &lt;app&gt; FOLDER
-</span><span class="n">SQLALCHEMY_DATABASE_URI</span> <span class="o">=</span> <span class="s">'sqlite:///'</span> <span class="o">+</span> <span class="n">os</span><span class="p">.</span><span class="n">path</span><span class="p">.</span><span class="n">join</span><span class="p">(</span><span class="n">basedir</span><span class="p">,</span> <span class="s">'db.sqlite3'</span><span class="p">)</span>
-<span class="n">SQLALCHEMY_TRACK_MODIFICATIONS</span> <span class="o">=</span> <span class="bp">False</span>
+# Set up the App SECRET_KEY
+SECRET_KEY = config('SECRET_KEY', default='S#perS3crEt_007')

-</code></pre></div></div>
+# This will create a file in <span class="nt">&lt;app&gt;</span> FOLDER
+SQLALCHEMY_DATABASE_URI = 'sqlite:///' + os.path.join(basedir, 'db.sqlite3')
+SQLALCHEMY_TRACK_MODIFICATIONS = False</code></pre></figure>

 <p>During the first request, the SQLite database and tables are automatically created in the root in the project.</p>

@ -1104,23 +1089,21 @@ By default, the app will redirect guest users to the login page. To access the p

 <p>This configuration becomes active if <code class="highlighter-rouge">.env</code> file has the <code class="highlighter-rouge">DEBUG</code> file set to <em>False</em></p>

-<div class="language-python highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1"># Production configuration
-</span>
-<span class="n">SESSION_COOKIE_HTTPONLY</span>  <span class="o">=</span> <span class="bp">True</span>
-<span class="n">REMEMBER_COOKIE_HTTPONLY</span> <span class="o">=</span> <span class="bp">True</span>
-<span class="n">REMEMBER_COOKIE_DURATION</span> <span class="o">=</span> <span class="mi">3600</span>
+<figure class="highlight"><pre><code class="language-html" data-lang="html"># Production configuration

-<span class="c1"># PostgreSQL database
-</span><span class="n">SQLALCHEMY_DATABASE_URI</span> <span class="o">=</span> <span class="s">'{}://{}:{}@{}:{}/{}'</span><span class="p">.</span><span class="nb">format</span><span class="p">(</span>
-    <span class="n">config</span><span class="p">(</span> <span class="s">'DB_ENGINE'</span>   <span class="p">,</span> <span class="n">default</span><span class="o">=</span><span class="s">'postgresql'</span>    <span class="p">),</span>
-    <span class="n">config</span><span class="p">(</span> <span class="s">'DB_USERNAME'</span> <span class="p">,</span> <span class="n">default</span><span class="o">=</span><span class="s">'appseed'</span>       <span class="p">),</span>
-    <span class="n">config</span><span class="p">(</span> <span class="s">'DB_PASS'</span>     <span class="p">,</span> <span class="n">default</span><span class="o">=</span><span class="s">'pass'</span>          <span class="p">),</span>
-    <span class="n">config</span><span class="p">(</span> <span class="s">'DB_HOST'</span>     <span class="p">,</span> <span class="n">default</span><span class="o">=</span><span class="s">'localhost'</span>     <span class="p">),</span>
-    <span class="n">config</span><span class="p">(</span> <span class="s">'DB_PORT'</span>     <span class="p">,</span> <span class="n">default</span><span class="o">=</span><span class="mi">5432</span>            <span class="p">),</span>
-    <span class="n">config</span><span class="p">(</span> <span class="s">'DB_NAME'</span>     <span class="p">,</span> <span class="n">default</span><span class="o">=</span><span class="s">'appseed-flask'</span> <span class="p">)</span>
-<span class="p">)</span>
+SESSION_COOKIE_HTTPONLY  = True
+REMEMBER_COOKIE_HTTPONLY = True
+REMEMBER_COOKIE_DURATION = 3600

-</code></pre></div></div>
+# PostgreSQL database
+SQLALCHEMY_DATABASE_URI = '{}://{}:{}@{}:{}/{}'.format(
+    config( 'DB_ENGINE'   , default='postgresql'    ),
+    config( 'DB_USERNAME' , default='appseed'       ),
+    config( 'DB_PASS'     , default='pass'          ),
+    config( 'DB_HOST'     , default='localhost'     ),
+    config( 'DB_PORT'     , default=5432            ),
+    config( 'DB_NAME'     , default='appseed-flask' )
+)</code></pre></figure>

 <p>In this configuration profile, the database defaults to a PostgreSQL DBMS. Make sure the <code class="highlighter-rouge">.env</code> has the right credentials to access the database.</p>

@ -1227,43 +1210,42 @@ The authentication status is checked by <code class="highlighter-rouge">@login_r
  <li><em>Base Blueprint</em> serve the HTML pages (index, page-404, etc) and the rest of the pages defined in the UI kit.</li>
 </ul>

-<div class="language-bash highlighter-rouge"><div class="highlight"><pre class="highlight"><code>&lt; PROJECT ROOT <span class="o">&gt;</span>
+<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;</span> <span class="nt">PROJECT</span> <span class="na">ROOT</span> <span class="nt">&gt;</span>
   |
   |-- app/
-   |    |-- base/                               <span class="c"># Base Blueprint</span>
+   |    |-- base/                               # Base Blueprint
   |    |    |-- static/assets/
-   |    |    |           |-- css/               <span class="c"># UI Kit css</span>
-   |    |    |           |-- JS/                <span class="c"># Javascript files</span>
-   |    |    |           |-- images/            <span class="c"># images used by the app</span>
-   |    |    |           |-- scss/              <span class="c"># SCSS files (if any)</span>
+   |    |    |           |-- css/               # UI Kit css
+   |    |    |           |-- JS/                # Javascript files
+   |    |    |           |-- images/            # images used by the app
+   |    |    |           |-- scss/              # SCSS files (if any)
   |    |    |
-   |    |    |-- templates/                      <span class="c"># Templates used to render pages</span>
+   |    |    |-- templates/                      # Templates used to render pages
   |    |         |
-   |    |         |-- includes/                  <span class="c">#</span>
-   |    |         |    |-- navigation.html       <span class="c"># Top menu component</span>
-   |    |         |    |-- sidebar.html          <span class="c"># Sidebar component</span>
-   |    |         |    |-- footer.html           <span class="c"># App Footer</span>
-   |    |         |    |-- scripts.html          <span class="c"># Scripts common to all pages</span>
+   |    |         |-- includes/                  #
+   |    |         |    |-- navigation.html       # Top menu component
+   |    |         |    |-- sidebar.html          # Sidebar component
+   |    |         |    |-- footer.html           # App Footer
+   |    |         |    |-- scripts.html          # Scripts common to all pages
   |    |         |
-   |    |         |-- layouts/                   <span class="c"># Master pages</span>
-   |    |         |    |-- base-fullscreen.html  <span class="c"># Used by Authentication pages</span>
-   |    |         |    |-- base.html             <span class="c"># Used by common pages</span>
+   |    |         |-- layouts/                   # Master pages
+   |    |         |    |-- base-fullscreen.html  # Used by Authentication pages
+   |    |         |    |-- base.html             # Used by common pages
   |    |         |
-   |    |         |-- accounts/                  <span class="c"># Authentication pages</span>
-   |    |              |-- login.html            <span class="c"># Login page</span>
-   |    |              |-- register.html         <span class="c"># Registration page</span>
+   |    |         |-- accounts/                  # Authentication pages
+   |    |              |-- login.html            # Login page
+   |    |              |-- register.html         # Registration page
   |    |
-   |    |-- home/                                <span class="c"># Home Blueprint - serve app pages (private area)</span>
-   |         |-- templates/                      <span class="c"># UI Kit Pages</span>
+   |    |-- home/                                # Home Blueprint - serve app pages (private area)
+   |         |-- templates/                      # UI Kit Pages
   |              |
-   |              |-- index.html                 <span class="c"># Default page</span>
-   |              |-- page-404.html              <span class="c"># Error 404 - mandatory page</span>
-   |              |-- page-500.html              <span class="c"># Error 500 - mandatory page</span>
-   |              |-- page-403.html              <span class="c"># Error 403 - mandatory page</span>
-   |              |-- <span class="k">*</span>.html                     <span class="c"># All other HTML pages</span>
+   |              |-- index.html                 # Default page
+   |              |-- page-404.html              # Error 404 - mandatory page
+   |              |-- page-500.html              # Error 500 - mandatory page
+   |              |-- page-403.html              # Error 403 - mandatory page
+   |              |-- *.html                     # All other HTML pages
   |
-   |-- <span class="k">************************************************************************</span>
-</code></pre></div></div>
+   |-- ************************************************************************</code></pre></figure>

 <p><br /></p>

@ -1286,19 +1268,17 @@ The authentication status is checked by <code class="highlighter-rouge">@login_r

 <p><code class="highlighter-rouge">app/base/models.py</code> define the callback functions required by <strong>Flask-Login</strong> library:</p>

-<div class="language-python highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1"># File: app/base/models.py
-</span>
-<span class="o">@</span><span class="n">login_manager</span><span class="p">.</span><span class="n">user_loader</span>
-<span class="k">def</span> <span class="nf">user_loader</span><span class="p">(</span><span class="nb">id</span><span class="p">):</span>
-    <span class="k">return</span> <span class="n">User</span><span class="p">.</span><span class="n">query</span><span class="p">.</span><span class="n">filter_by</span><span class="p">(</span><span class="nb">id</span><span class="o">=</span><span class="nb">id</span><span class="p">).</span><span class="n">first</span><span class="p">()</span>
+<figure class="highlight"><pre><code class="language-html" data-lang="html"># File: app/base/models.py

-<span class="o">@</span><span class="n">login_manager</span><span class="p">.</span><span class="n">request_loader</span>
-<span class="k">def</span> <span class="nf">request_loader</span><span class="p">(</span><span class="n">request</span><span class="p">):</span>
-    <span class="n">username</span> <span class="o">=</span> <span class="n">request</span><span class="p">.</span><span class="n">form</span><span class="p">.</span><span class="n">get</span><span class="p">(</span><span class="s">'username'</span><span class="p">)</span>
-    <span class="n">user</span> <span class="o">=</span> <span class="n">User</span><span class="p">.</span><span class="n">query</span><span class="p">.</span><span class="n">filter_by</span><span class="p">(</span><span class="n">username</span><span class="o">=</span><span class="n">username</span><span class="p">).</span><span class="n">first</span><span class="p">()</span>
-    <span class="k">return</span> <span class="n">user</span> <span class="k">if</span> <span class="n">user</span> <span class="k">else</span> <span class="bp">None</span>
+@login_manager.user_loader
+def user_loader(id):
+    return User.query.filter_by(id=id).first()

-</code></pre></div></div>
+@login_manager.request_loader
+def request_loader(request):
+    username = request.form.get('username')
+    user = User.query.filter_by(username=username).first()
+    return user if user else None</code></pre></figure>

 <p><br /></p>

@ -1306,13 +1286,11 @@ The authentication status is checked by <code class="highlighter-rouge">@login_r
  <p><strong>Usage in contoler</strong> (Sample file)</p>
 </blockquote>

-<div class="language-python highlighter-rouge"><div class="highlight"><pre class="highlight"><code>
-<span class="k">def</span> <span class="nf">sample_method</span><span class="p">(</span><span class="n">path</span><span class="p">):</span>
+<figure class="highlight"><pre><code class="language-html" data-lang="html">def sample_method(path):

-    <span class="c1"># Redirect guests users to login page
-</span>    <span class="k">if</span> <span class="ow">not</span> <span class="n">current_user</span><span class="p">.</span><span class="n">is_authenticated</span><span class="p">:</span>
-        <span class="k">return</span> <span class="n">redirect</span><span class="p">(</span><span class="n">url_for</span><span class="p">(</span><span class="s">'login'</span><span class="p">))</span>
-</code></pre></div></div>
+    # Redirect guests users to login page
+    if not current_user.is_authenticated:
+        return redirect(url_for('login'))</code></pre></figure>

 <p><br /></p>

@ -1320,7 +1298,7 @@ The authentication status is checked by <code class="highlighter-rouge">@login_r
  <p><strong>Usage in view</strong></p>
 </blockquote>

-<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code>    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"collapse navbar-collapse"</span> <span class="na">id=</span><span class="s">"navigation"</span><span class="nt">&gt;</span>
+<figure class="highlight"><pre><code class="language-html" data-lang="html">    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"collapse navbar-collapse"</span> <span class="na">id=</span><span class="s">"navigation"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;ul</span> <span class="na">class=</span><span class="s">"navbar-nav ml-auto"</span><span class="nt">&gt;</span>

        <span class="c">&lt;!-- The Usage of &lt;current_user&gt; object --&gt;</span>
@ -1342,8 +1320,7 @@ The authentication status is checked by <code class="highlighter-rouge">@login_r
        

        <span class="nt">&lt;/ul&gt;</span>
-    <span class="nt">&lt;/div&gt;</span>
-</code></pre></div></div>
+    <span class="nt">&lt;/div&gt;</span></code></pre></figure>

 <p><br /></p>

--- a/docs/1.0/getting-started/setup-centos-for-development.html
+++ b/docs/1.0/getting-started/setup-centos-for-development.html
@ -676,10 +676,9 @@

        <main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
          <h1 class="bd-title" id="content">Set up CentOS</h1>
-          <p class="bd-lead"></p>
-          <h1 id="set-up-centos">Set Up <a href="https://www.centos.org/">CentOS</a></h1>
+          
+<p class="bd-lead"></p>
 <hr />
-
 <p><a href="https://www.centos.org/">CentOS</a> is a Linux distribution that provides a free, community-supported computing platform functionally compatible with its upstream source, Red Hat Enterprise Linux (RHEL). In January 2014, CentOS announced the official joining with Red Hat while staying independent from RHEL under a new CentOS governing board.</p>

 <p><br /></p>
@ -689,10 +688,8 @@

 <p>The <code class="highlighter-rouge">Development Tools</code> package group provides the GNU Compiler Collection (GCC), GNU Debugger (GDB), and other related development tools.</p>

-<div class="language-bash highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nv">$ </span><span class="c"># install Development Tools bundle</span>
-<span class="nv">$ </span><span class="nb">sudo </span>yum group <span class="nb">install</span> <span class="s2">"Development Tools"</span>
-
-</code></pre></div></div>
+<figure class="highlight"><pre><code class="language-html" data-lang="html">$ # install Development Tools bundle
+$ sudo yum group install "Development Tools"</code></pre></figure>

 <p><br /></p>

@ -701,8 +698,7 @@

 <p><a href="https://git-scm.com/">Git</a> is the most popular version control system on Linux. It is easy to use, amazingly fast, it’s very efficient with large projects, and it has an incredible branching system for non-linear development.</p>

-<div class="language-bash highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nv">$ </span><span class="nb">sudo </span>yum <span class="nb">install </span>git
-</code></pre></div></div>
+<figure class="highlight"><pre><code class="language-html" data-lang="html">$ sudo yum install git</code></pre></figure>

 <p><br /></p>

@ -710,16 +706,13 @@

 <p>By default, CentOS is not installing python3, but we can easily set up the installation.</p>

-<div class="language-bash highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nv">$ </span><span class="nb">sudo </span>yum <span class="nb">install </span>python3
-<span class="err">$</span>
-</code></pre></div></div>
+<figure class="highlight"><pre><code class="language-html" data-lang="html">$ sudo yum install python3</code></pre></figure>

 <blockquote>
  <p>And Python3 libraries for development</p>
 </blockquote>

-<div class="language-bash highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nb">sudo </span>yum <span class="nb">install </span>python3-devel
-</code></pre></div></div>
+<figure class="highlight"><pre><code class="language-html" data-lang="html">sudo yum install python3-devel</code></pre></figure>

 <p><br /></p>

@ -727,8 +720,7 @@

 <p><a href="https://httpd.apache.org/">Apache</a> is available within CentOS’s default software repositories, which means you can install it with the <code class="highlighter-rouge">yum</code> package manager.</p>

-<div class="language-bash highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nv">$ </span><span class="nb">sudo </span>yum <span class="nb">install </span>httpd
-</code></pre></div></div>
+<figure class="highlight"><pre><code class="language-html" data-lang="html">$ sudo yum install httpd</code></pre></figure>

 <p><br /></p>

@ -736,17 +728,16 @@

 <p><br /></p>

-<div class="language-bash highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nv">$ </span><span class="c"># this cmd will start the server</span>
-<span class="nv">$ </span><span class="nb">sudo </span>systemctl start httpd
-<span class="err">$</span>
-<span class="nv">$ </span><span class="c"># test server status</span>
-<span class="nv">$ </span><span class="nb">sudo </span>systemctl status httpd
-<span class="err">$</span>
-<span class="nv">$ </span><span class="c"># access the default page with `lynx`</span>
-<span class="nv">$ </span><span class="nb">sudo </span>yum <span class="nb">install </span>lynx
-<span class="err">$</span>
-<span class="nv">$ </span>lynx http://localhost
-</code></pre></div></div>
+<figure class="highlight"><pre><code class="language-html" data-lang="html">$ # this cmd will start the server
+$ sudo systemctl start httpd
+$
+$ # test server status
+$ sudo systemctl status httpd
+$
+$ # access the default page with `lynx`
+$ sudo yum install lynx
+$
+$ lynx http://localhost</code></pre></figure>

 <p><br /></p>

@ -754,11 +745,10 @@

 <p>Node.js is an open-source, cross-platform, JavaScript runtime environment that executes JavaScript code outside of a browser.</p>

-<div class="language-bash highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nv">$ </span><span class="nb">sudo </span>yum <span class="nb">install </span>nodejs
-<span class="err">$</span>
-<span class="nv">$ </span><span class="c"># check the version</span>
-<span class="nv">$ </span>node <span class="nt">--version</span>
-</code></pre></div></div>
+<figure class="highlight"><pre><code class="language-html" data-lang="html">$ sudo yum install nodejs
+$
+$ # check the version
+$ node --version</code></pre></figure>

 <p><br /></p>

@ -766,11 +756,10 @@

 <p>The yarn is an advanced package management software for Node.js applications. It is a fast, secure, and reliable alternative that any other Nodejs package manager.</p>

-<div class="language-bash highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nv">$ </span><span class="nb">sudo </span>npm <span class="nb">install </span>yarn <span class="nt">-g</span>
-<span class="err">$</span>
-<span class="nv">$ </span><span class="c"># check the version</span>
-<span class="nv">$ </span>yarn <span class="nt">-v</span>
-</code></pre></div></div>
+<figure class="highlight"><pre><code class="language-html" data-lang="html">$ sudo npm install yarn -g
+$
+$ # check the version
+$ yarn -v</code></pre></figure>

 <p><br /></p>

@ -779,8 +768,7 @@

 <p>RHEL 8 does not officially support Docker; in this section, we will show how to install the new set of container tools as well as the old lady, docker package. The docker package is replaced by the Container Tools module, which consists of tools such as Podman, Buildah, Skope, and several others.</p>

-<div class="language-bash highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nv">$ </span>dnf module <span class="nb">install</span> <span class="nt">-y</span> container-tools
-</code></pre></div></div>
+<figure class="highlight"><pre><code class="language-html" data-lang="html">$ dnf module install -y container-tools</code></pre></figure>

 <p><br /></p>

@ -789,10 +777,9 @@

 <p>Now install docker from the official repositories by running the following commands. Here, the yum-utils package provides the yum-config-manager utility.</p>

-<div class="language-bash highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nv">$ </span>dnf <span class="nb">install </span>yum-utils
-<span class="nv">$ </span>yum-config-manager <span class="nt">--add-repo</span> https://download.docker.com/linux/centos/docker-ce.repo
-<span class="nv">$ </span>dnf <span class="nb">install </span>containerd.io docker-ce docker-ce-cli
-</code></pre></div></div>
+<figure class="highlight"><pre><code class="language-html" data-lang="html">$ dnf install yum-utils
+$ yum-config-manager --add-repo https://download.docker.com/linux/centos/docker-ce.repo
+$ dnf install containerd.io docker-ce docker-ce-cli</code></pre></figure>

 <p><br /></p>

@ -803,15 +790,15 @@

 <p>To install DNF on RHEL/CentOS 7 systems, you need to set up and enable <code class="highlighter-rouge">epel</code> Yum repository before installing DNF</p>

-<div class="language-bash highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nv">$ </span><span class="c"># Initial Setup</span>
-<span class="nv">$ </span>yum <span class="nb">install </span>epel-release
-<span class="err">$</span>
-<span class="nv">$ </span><span class="c"># Install `DNF` tool</span>
-<span class="nv">$ </span>yum <span class="nb">install </span>dnf
-<span class="err">$</span>
-<span class="nv">$ </span><span class="c"># test the installation</span>
-<span class="nv">$ </span>dnf –help
-</code></pre></div></div>
+<figure class="highlight"><pre><code class="language-html" data-lang="html">$ # Initial Setup
+$ yum install epel-release
+$
+$ # Install `DNF` tool
+$ yum install dnf
+$
+$ # test the installation
+$ dnf –help</code></pre></figure>
+

        </main>
      </div>
--- a/docs/1.0/getting-started/setup-ubuntu-for-development.html
+++ b/docs/1.0/getting-started/setup-ubuntu-for-development.html
@ -672,10 +672,9 @@

        <main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
          <h1 class="bd-title" id="content">Setup Ubuntu for Developers</h1>
-          <p class="bd-lead"></p>
-          <h1 id="setup-ubuntu-for-developers">Setup <a href="https://ubuntu.com/">Ubuntu</a> for developers</h1>
-<hr />

+<p class="bd-lead"></p>
+<hr />
 <p><a href="https://ubuntu.com/">Ubuntu</a> is a complete Linux operating system, freely available with both community and professional support. Ubuntu is suitable for both desktop and server use. The current Ubuntu release supports many architectures: Intel x86 (IBM-compatible PC), AMD64 (x86-64), ARMv7, ARMv8.</p>

 <p>Ubuntu includes thousands of pieces of software, starting with the Linux kernel version 4.15 and GNOME 3.28, and covering every standard desktop application from word processing and spreadsheet applications to internet access applications, web server software, email software, programming languages and tools and of course several games. For more information please access the official website: <a href="https://ubuntu.com/">Ubuntu.com</a></p>
@ -687,10 +686,8 @@

 <p>The <code class="highlighter-rouge">Build Essential</code> package group provides the GNU Compiler Collection (GCC), GNU Debugger (GDB), and other related development tools.</p>

-<div class="language-bash highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nv">$ </span><span class="c"># install Development Tools bundle</span>
-<span class="nv">$ </span><span class="nb">sudo </span>apt <span class="nb">install </span>build-essential
-
-</code></pre></div></div>
+<figure class="highlight"><pre><code class="language-html" data-lang="html">$ # install Development Tools bundle
+$ sudo apt install build-essential</code></pre></figure>

 <p><br /></p>

@ -699,8 +696,7 @@

 <p><a href="https://git-scm.com/">Git</a> is the most popular version control system on Linux. It is easy to use, amazingly fast, it’s very efficient with large projects, and it has an incredible branching system for non-linear development.</p>

-<div class="language-bash highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nv">$ </span><span class="nb">sudo </span>apt <span class="nb">install install </span>git
-</code></pre></div></div>
+<figure class="highlight"><pre><code class="language-html" data-lang="html">$ sudo apt install install git</code></pre></figure>

 <p><br /></p>

@ -708,16 +704,14 @@

 <p>Ubuntu comes with both Python 2.7 and Python 3.5 by default. You can install Python 3.6 along with them via a <a href="https://launchpad.net/~jonathonf/+archive/ubuntu/python-3.6">third-party PPA</a> by doing the following steps:</p>

-<div class="language-bash highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nv">$ </span><span class="nb">sudo </span>add-apt-repository ppa:jonathonf/python-3.6
-</code></pre></div></div>
+<figure class="highlight"><pre><code class="language-html" data-lang="html">$ sudo add-apt-repository ppa:jonathonf/python-3.6</code></pre></figure>

 <blockquote>
  <p>And Python3 libraries for development</p>
 </blockquote>

-<div class="language-bash highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nv">$ </span><span class="nb">sudo </span>apt-get update
-<span class="nv">$ </span><span class="nb">sudo </span>apt-get <span class="nb">install </span>python3.6
-</code></pre></div></div>
+<figure class="highlight"><pre><code class="language-html" data-lang="html">$ sudo apt-get update
+$ sudo apt-get install python3.6</code></pre></figure>

 <p><br /></p>

@ -725,11 +719,10 @@

 <p>Node.js is an open-source, cross-platform, JavaScript runtime environment that executes JavaScript code outside of a browser.</p>

-<div class="language-bash highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nv">$ </span><span class="nb">sudo </span>apt-get <span class="nb">install install </span>nodejs
-<span class="err">$</span>
-<span class="nv">$ </span><span class="c"># check the version</span>
-<span class="nv">$ </span>node <span class="nt">--version</span>
-</code></pre></div></div>
+<figure class="highlight"><pre><code class="language-html" data-lang="html">$ sudo apt-get install install nodejs
+$
+$ # check the version
+$ node --version</code></pre></figure>

 <p><br /></p>

@ -737,11 +730,11 @@

 <p>The yarn is an advanced package management software for Node.js applications. It is a fast, secure, and reliable alternative that any other Nodejs package manager.</p>

-<div class="language-bash highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nv">$ </span><span class="nb">sudo </span>npm <span class="nb">install </span>yarn <span class="nt">-g</span>
-<span class="err">$</span>
-<span class="nv">$ </span><span class="c"># check the version</span>
-<span class="nv">$ </span>yarn <span class="nt">-v</span>
-</code></pre></div></div>
+<figure class="highlight"><pre><code class="language-html" data-lang="html">$ sudo npm install yarn -g
+$
+$ # check the version
+$ yarn -v</code></pre></figure>
+

        </main>
      </div>
--- a/docs/1.0/getting-started/setup-windows-for-development.html
+++ b/docs/1.0/getting-started/setup-windows-for-development.html
@ -672,10 +672,9 @@

        <main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
          <h1 class="bd-title" id="content">Setup Windows for Developers</h1>
-          <p class="bd-lead"></p>
-          <h1 id="setup-windows-for-developers">Setup <a href="https://www.microsoft.com/en-us/windows">Windows</a> for developers</h1>
-<hr />

+<p class="bd-lead"></p>
+<hr />
 <p>Microsoft Windows, commonly referred to as Windows, is a group of several proprietary graphical operating system families, all of which are developed and marketed by Microsoft. Each family caters to a certain sector of the computing industry. Active Microsoft Windows families include Windows NT and Windows IoT; these may encompass subfamilies, e.g. Windows Server or Windows Embedded Compact (Windows CE). Defunct Microsoft Windows families include Windows 9x, Windows Mobile and Windows Phone.</p>

 <p><br /></p>
@ -714,9 +713,8 @@

 <p>If the installation goes well, test the Python execution from the terminal:</p>

-<div class="language-bash highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nv">$ </span>python <span class="nt">--version</span>
-Python 3.7.2
-</code></pre></div></div>
+<figure class="highlight"><pre><code class="language-html" data-lang="html">$ python --version
+Python 3.7.2</code></pre></figure>

 <p><br /></p>

@ -730,13 +728,12 @@ Python 3.7.2
  <li>Test the installation by typing <code class="highlighter-rouge">git</code></li>
 </ul>

-<div class="language-bash highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nv">$ </span>git
-usage: git <span class="o">[</span><span class="nt">--version</span><span class="o">]</span> <span class="o">[</span><span class="nt">--help</span><span class="o">]</span> <span class="o">[</span><span class="nt">-C</span> &lt;path&gt;] <span class="o">[</span><span class="nt">-c</span> <span class="nv">name</span><span class="o">=</span>value]
-           <span class="o">[</span><span class="nt">--exec-path</span><span class="o">[=</span>&lt;path&gt;]] <span class="o">[</span><span class="nt">--html-path</span><span class="o">]</span> <span class="o">[</span><span class="nt">--man-path</span><span class="o">]</span> <span class="o">[</span><span class="nt">--info-path</span><span class="o">]</span>
-           <span class="o">[</span><span class="nt">-p</span> | <span class="nt">--paginate</span> | <span class="nt">--no-pager</span><span class="o">]</span> <span class="o">[</span><span class="nt">--no-replace-objects</span><span class="o">]</span> <span class="o">[</span><span class="nt">--bare</span><span class="o">]</span>
-           <span class="o">[</span><span class="nt">--git-dir</span><span class="o">=</span>&lt;path&gt;] <span class="o">[</span><span class="nt">--work-tree</span><span class="o">=</span>&lt;path&gt;] <span class="o">[</span><span class="nt">--namespace</span><span class="o">=</span>&lt;name&gt;]
-           &lt;<span class="nb">command</span><span class="o">&gt;</span> <span class="o">[</span>&lt;args&gt;]
-</code></pre></div></div>
+<figure class="highlight"><pre><code class="language-html" data-lang="html">$ git
+usage: git [--version] [--help] [-C <span class="nt">&lt;path&gt;</span>] [-c name=value]
+           [--exec-path[=<span class="nt">&lt;path&gt;</span>]] [--html-path] [--man-path] [--info-path]
+           [-p | --paginate | --no-pager] [--no-replace-objects] [--bare]
+           [--git-dir=<span class="nt">&lt;path&gt;</span>] [--work-tree=<span class="nt">&lt;path&gt;</span>] [--namespace=<span class="nt">&lt;name&gt;</span>]
+           <span class="nt">&lt;command&gt;</span> [<span class="nt">&lt;args&gt;</span>]</code></pre></figure>

 <p>For more information about Git please access:</p>

@ -759,9 +756,9 @@ usage: git <span class="o">[</span><span class="nt">--version</span><span class=

 <p>Execute the installer, and choosing the default options should be enough to have a successfull installation:</p>

-<div class="language-bash highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nv">$ </span>node <span class="nt">-v</span>
-<span class="nv">$ </span>npm <span class="nt">-v</span>
-</code></pre></div></div>
+<figure class="highlight"><pre><code class="language-html" data-lang="html">$ node -v
+$ npm -v</code></pre></figure>
+

        </main>
      </div>