/ Ghost

Zvýrazňovanie syntaxe v CMS Ghost

V ďalšom zo série krátkych článkov o CMS Ghost si ukážeme ako na blogu rozbehať zvýražnovanie syntaxe pre útržky kódu. Využijeme na to javascriptový zvýraznovač syntaxe zvaný Prism.

Generovanie js a css

Navštívte stránku http://prismjs.com na ktorej si môžte nastaviť vlastnosti toho, ako má zvýrazňovanie vyzerať (Themes), aké jazyky má podporovať (Languages) a prípadne aké ďalšie doplnky má obsahovať (Plugins).

Dôležité je hlavne zvoliť kompresný level (Compression level) na Minified version aby sa uživateľovi načítala stránka rýchlejšie (odstránia sa zbytočné medzery, tabulátory a riadky takže výsledný kód má menšiu veľkosť).

V spodnej časti su dve tlačítka Download JS a Download CSS. Kliknutím na tieto tlačítka sa stiahnú dva súbory prism.js a prism.css.

Upload

Nahrajte súbory prism.js a prism.css na váš web tak, aby boli verejne dostupné. Dobrým zvykom je umiestniť ich do priečinku /static tak, aby cesta vyzerala nasledovne:
https://spodlesny.eu/static/prism.js
https://spodlesny.eu/static/prism.css

Spustenie

Otvorte Code injection v administračnom rozhraní Ghost.
Do Blog Header vložte nasledujúci kód:

<link href="/static/prism.css" rel="stylesheet" />  

A do Blog Footer vložte riadok:

<script type="text/javascript" src="/static/prism.js"></script>

Všimnite si že v kóde je cesta k súboru vo formáte /static/prism.css. Môžete vložiť url (formát: https://spodlesny.eu/static/prism.js) avšak teraz ste obmedzený na vašu doménu (v mojom prípade spodlesny.eu) a pri zmene domény budete musieť znovu upraviť kód.

Týmto spôsobom môžete používať prism.js a prism.css, ktoré používam ja, ale akonáhle zmenim doménu, zruším web alebo odstránim tieto dva súbory z disku, prestane vám zvýraznovanie syntaxe fungovať. Používajte teda prvý spôsob. A v prípade že chcete použiť môj kód, stiahnite si ho a nahrajte va váš web.

Použitie

Použitie je veľmi jednoduché. Kód umiestnite medzi bloky ``` s tým, že na prvom riadku definujete o aký jazyk sa jedná.

Kód:

```html
<link href="/static/prism.css" rel="stylesheet" />  
<script type="text/javascript" src="/static/prism.js"></script>
```

Zobrazenie:

<link href="/static/prism.css" rel="stylesheet" />  
<script type="text/javascript" src="/static/prism.js"></script>

Upozornenie: Nejedná sa o slovenský dĺžeň (´), ale o anglický backtick (`).

Ukážky:

HTML

<header class="site-header outer " style="background-image: url(https://casper.ghost.org/v1.0.0/images/blog-cover.jpg)">
    <div class="inner">
        <div class="site-header-content">
            <h1 class="site-title">
                    Šimon Podlesný
            </h1>
            <h2 class="site-description">Myšlienky, príbehy, nápady a zaujimavosti</h2>
        </div>
        <nav class="site-nav">
            <div class="site-nav-left">
                <ul class="nav" role="menu">
                    <li class="nav-home" role="menuitem"><a href="https://spodlesny.eu">Home</a></li>
                </ul>
            </div>
            <div class="site-nav-right">
                <div class="social-links">
                    <a class="social-link social-link-fb" href="https://www.facebook.com/spodlesny" target="_blank" rel="noopener">
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
                            <path d="M19 6h5V0h-5c-3.86 0-7 3.14-7 7v3H8v6h4v16h6V16h5l1-6h-6V7c0-.542.458-1 1-1z" />
                        </svg>
                    </a>
                    <a class="social-link social-link-tw" href="https://twitter.com/spodlesny" target="_blank" rel="noopener">
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
                            <path d="M30.063 7.313c-.813 1.125-1.75 2.125-2.875 2.938v.75c0 1.563-.188 3.125-.688 4.625a15.088 15.088 0 0 1-2.063 4.438c-.875 1.438-2 2.688-3.25 3.813a15.015 15.015 0 0 1-4.625 2.563c-1.813.688-3.75 1-5.75 1-3.25 0-6.188-.875-8.875-2.625.438.063.875.125 1.375.125 2.688 0 5.063-.875 7.188-2.5-1.25 0-2.375-.375-3.375-1.125s-1.688-1.688-2.063-2.875c.438.063.813.125 1.125.125.5 0 1-.063 1.5-.25-1.313-.25-2.438-.938-3.313-1.938a5.673 5.673 0 0 1-1.313-3.688v-.063c.813.438 1.688.688 2.625.688a5.228 5.228 0 0 1-1.875-2c-.5-.875-.688-1.813-.688-2.75 0-1.063.25-2.063.75-2.938 1.438 1.75 3.188 3.188 5.25 4.25s4.313 1.688 6.688 1.813a5.579 5.579 0 0 1 1.5-5.438c1.125-1.125 2.5-1.688 4.125-1.688s3.063.625 4.188 1.813a11.48 11.48 0 0 0 3.688-1.375c-.438 1.375-1.313 2.438-2.563 3.188 1.125-.125 2.188-.438 3.313-.875z" />
                        </svg>
                    </a>
                </div>
                <a class="subscribe-button" href="#subscribe">Subscribe</a>
            </div>
        </nav>
    </div>
</header>

Python

from django.db import models

# Create your models here.

class Room(models.Model):
    room_name = models.CharField(max_length=128, primary_key=True, name='room_name')

class SensorPosition(models.Model):
    sensor_position = models.CharField(max_length=128, name='sensor_position', primary_key=True)

class Sensor(models.Model):
    sensor_name = models.CharField(max_length=128, name='sensor_name', primary_key=True)
    description = models.CharField(max_length=1024, name='description', blank=True, null=True)
    add_date = models.DateTimeField('date published', auto_now_add=True)
    room = models.ForeignKey(Room, blank=False, null=False, on_delete=models.CASCADE)
    position = models.ForeignKey(SensorPosition, blank=False, null=False, on_delete=models.CASCADE)

class TemperatureData(models.Model):
    temperature = models.DecimalField(decimal_places=2, max_digits=5)
    sensor = models.ForeignKey(Sensor, blank=False, null=False, on_delete=models.CASCADE)
    timestamp = models.DateTimeField('log time', auto_now_add=True)

C++

/**
 * Get integer from octet
 * @param octet
 * @param buf
 * @param size
 * @return
 */
int get_int_value(std::bitset<8> octet, std::vector<unsigned char> buf, unsigned long long int size) {
    if (size <= 1) return static_cast<int>(octet.to_ulong());

    unsigned long long int size_of_bitset = size-128;
    std::bitset<126*8> new_size;

    for (unsigned long long int x = size_of_bitset; x!=0; x--){
        std::bitset<8> chunk = pop_frontu(buf);
        new_size <<= chunk.size();
        new_size ^= std::bitset<new_size.size()>(chunk.to_ullong());
    }

    return static_cast<int>(new_size.to_ullong());

}

PHP

/**
 * Match all matches in $data string and return them as two dimensional array
 *
 * @param $raw_rules - rules from file as array - one record == one line in file
 * @param $data - string conatining raw data from input file
 * @return array - two dimensional array, where second dimension contains keys: begin, end,  rule, match, priority
 */
function match_all($raw_rules, $data){
    $rules = array();
    $ninja_array = [];
    $priority = 0;

    foreach ($raw_rules as $x) {
        $regex = implode("", array_slice($x, 0, 1));
        $regex = normalize_regex($regex);
        array_shift($x);
        array_push($rules, $x);
        preg_match_all("/" . $regex . "/s", $data, $matches, PREG_OFFSET_CAPTURE);
        foreach ($x as $rule) {
            check_format($rule);
            $matches[0] = array_reverse($matches[0]);
            foreach ($matches[0] as $match){
                if ($match[0] !== ""){
                    $record["begining"] = $match[1]; // begining of match
                    $record["end"] = strlen($match[0])+$match[1]; // end of match
                    $record["rule"] = $rule; // rule that should be applied
                    $record["match"] = $match[0]; // string that was matched
                    $record["priority"] = $priority; // priority - late match, bigger priority
                    $priority++;
                    array_push($ninja_array, $record);
                }
            }
        }
    }

    return $ninja_array;
}

YAML

- hosts: raspberry-local
  name: Set password, hostname, project in RasPi
  remote_user: pi
  gather_facts: yes
  become: yes
  vars_files:
    - vars/variables.yml
  roles:
#     - wifi
#     - password_reset_hostname_change
#     - project_init
#     - supervisor

- hosts: server
  name: Create VPN certificate on server
  remote_user: root
  gather_facts: yes
  vars_files:
    - vars/variables.yml
  #roles:
    #- revoke_vpn_config
    #- create_vpn_config

- hosts: raspberry-local
  name: Download certificate to RasPi, install, set and run OpenVPN
  remote_user: pi
  gather_facts: yes
  become: yes
  vars_files:
    - vars/variables.yml
  roles:
    - download_and_set_VPN_config

- hosts: server
  name: Configure routes for reaching RasPi-s
  remote_user: root
  gather_facts: yes
  vars_files:
    - vars/variables.yml
  roles:
    - port_forwarding