Démo des plugins de type page/html

Table des matières

1. Fichier de tests du plugin add_icons

see the add_icons.md source code

Ce plugin de type page va scanner les liens qui se trouvent dans la note et selon des règles type expression régulière va permettre l’ajout d’une icône devient les liens.

1.1. Exemple

1.2. Paramétrage

La position de l’icône peut être placée devant (before) ou derrière (after).

    "plugins": {
        "options": {
            "page": {
                "add_icons": {
                    "position": "after",
                    "regex": [
                        {
                            "pattern": "(facebook\\.com)",
                            "icon": "fa fa-facebook-official"
                        },
                        {
                            "pattern": "(github\\.com)",
                            "icon": "fa fa-github"
                        },
                        {
                            "pattern": "(joomla)",
                            "icon": "fa fa-joomla"
                        },
                        {
                            "pattern": "(slideshare\\.)",
                            "icon": "fa fa-slideshare"
                        },
                        {
                            "pattern": "(twitter\\.)",
                            "icon": "fa fa-twitter"
                        },
                        {
                            "pattern": "(youtube\\.)",
                            "icon": "fa fa-youtube"
                        },
                        {
                            "pattern": "\\.(7z|gzip|tar|zip)",
                            "icon": "fa fa-file-archive-o"
                        },
                        {
                            "pattern": "(\\.docx?)",
                            "icon": "fa fa-file-word-o"
                        },
                        {
                            "pattern": "(\\.pdf)",
                            "icon": "fa fa-file-pdf-o"
                        },
                        {
                            "pattern": "(\\.pptx?)",
                            "icon": "fa fa-file-powerpoint-o"
                        },
                        {
                            "pattern": "(\\.(xlsx?|xlam))",
                            "icon": "fa fa-file-excel-o"
                        }
                    ]
                }
            }
        }      
    }      

2. Fichier de tests du plugin anchor

see the anchor.md source code

2.1. Premier titre

En survollant le titre chaque titre, une ancre doit apparaître avec, si l’on clique dessus, le slug du titre qui s’affiche alors dans l’URL.

Cela afin de pouvoir générer une table des matières ou de fournir un lien vers le titre en question.

2.2. Second titre

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?

2.3. Troisième titre

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat

2.4. Librairie

Inspiré de Header hover anchor links on GitHub Pages using Jekyll

3. Fichier de tests du plugin custom

see the custom.md source code

Ce plugin de type page html va permettre d’ajouter vos propres feuilles de styles (css) ou script (js). Ils seront chargés par Marknotes dans le rendu HTML de votre page.

S’ils sont définis pour l’ensemble du site (fichier settings.json à la racine du site); ces fichiers seront chargés dès le début càd pour l’interface elle-même ainsi que pour la page qui affichera la note au format HTML.

Si les customs sont définis au niveau du dossier ou uniquement pour la note elle-même, ce qui est le cas de cet exemple, vous ne verrez pas vos fichiers custom en affichant la note depuis l’interface mais uniquement en affichant la note au format .html càd en l’ouvrant dans une nouvelle fenêtre.

3.1. Exemples

Ouvrez cette note dans une nouvelle page web afin qu’elle s’affiche au dehors de l’interface et vous verrez les fichiers custom.css et custom.js en action.

3.2. Paramétrage

Ci-dessous un exemple de paramétrage du plugin custom. Vous pouvez charger autant de fichiers que vous le souhaitez.

Le chemin relatif débute à partir du dossier racine du site web (p.ex. /public_html/marknotes); plus précisément : ce dossier racine est le dossier où se trouve le fichier settings.json.dist.

{
    "plugins": {
        "options": {
            "page": {
                "html": {
                    "custom" : {
                        "css" : [
                            "your_own.css",
                            "/assets/a_second_one.css"
                        ],
                        "js" : [
                            "custom.js"
                        ]
                    }
                }
            }
        }
    }
}

(sans les espaces à l’avant dernière position des mots)

4. Fichier de tests du plugin linkify

see the linkify.md source code

Ce plugin ne requiert aucun tag et, s’il est actif, se déclenche automatiquement pour ajouter automatiquement des hyperliens.

Le document markdown utilisé pour cette note ne contient aucun hyperlink; ils sont tous ajoutés par le plugin linkify.

Quelques exemples (dans le source .md, ces liens n’existent pas) :

Les liens ci-dessus sont ajoutés par le plugin Linkify qui analyse le code et détecte les URLs ainsi que le lien de type mailto:

4.1. Activation

L’activation du plugin se fait depuis le fichier settings.json comme suit :

{    
    "plugins": {
        "page": {
            "html": {
                "linkify": {
                    "enabled": 1
                }
            }
        }
    }
}

4.2. Paramétrage

Ce plugin n’a pas de paramètre

4.3. Librairie

Linkify implémente Linkifyjs de SoapBox

see the links_target.md source code

Ce plugin va ajouter un target=_blank à chaque lien de la note afin qu’un nouvel onglet soit créé dans le navigateur lorsque l’utilisateur clique sur le lien.

5.1. Exemple

Ce lien pointe vers Google et il s’ouvre dans une nouvelle fenêtre si links_target est actif.

Pour les besoins de la démo, le plugin n’est pas actif sur cette note précise.

5.2. Activation

L’activation du plugin se fait depuis le fichier settings.json comme suit :

{    
    "plugins": {
        "page": {
            "html": {
                "links_target": {
                    "enabled": 1
                }
            }
        }
    }
}

6. Plugin Mermaid

Cette note doit être affichée dans une nouvelle fenêtre

https://github.com/knsv/mermaid

6.1. Documentation

6.2. API

Note : Mermaid has an API called mermaidAPI and his render method allow to save the chart as a SVG file.

6.3. Flowchart

https://mermaidjs.github.io/flowchart.html

graph LR A---|This is the text|B
graph LR
    A---|This is the text|B

6.3.2. Basic

graph LR A[Square Rect]--Link text → B((Circle)) A → C(Round Rect) B → D{Rhombus} C → D
graph LR
    A[Square Rect] -- Link text → B((Circle))
    A → C(Round Rect)
    B → D{Rhombus}
    C → D
graph LR; A-.->B;
graph LR;
    A-.->B;

6.3.4. Subgraphs

graph TB c1-->a2 subgraph one a1-->a2 end subgraph two b1-->b2 end subgraph three c1-->c2 end
graph TB
    c1-->a2
    subgraph one
    a1-->a2
    end
    subgraph two
    b1-->b2
    end
    subgraph three
    c1-->c2
    end

6.3.5. Graph edges

graph LR A[Hard edge]-->B(Round edge) B → C{Decision} C-->|One| D[Result one] C-->|Two| E[Result two]
graph LR
A[Hard edge] -->B(Round edge)
    B → C{Decision}
    C -->|One| D[Result one]
    C -->|Two| E[Result two]

6.3.6. Add styles

It is possible to apply specific styles such as a thicker border or a different background color to a node.

graph LR id1(Start)-->id2(Stop) style id1 fill:#f9f, stroke:#333,stroke-width:4px style id2 fill:#ccf, stroke:#f66,stroke-width:2px, stroke-dasharray: 5, 5
graph LR
    id1(Start)-->id2(Stop)
    style id1 fill:#f9f,stroke:#333,stroke-width:4px
    style id2 fill:#ccf,stroke:#f66,stroke-width:2px,stroke-dasharray: 5, 5

6.4. SequenceDiagram

https://mermaidjs.github.io/sequenceDiagram.html

6.4.0.1. Simple
sequenceDiagram Alice->>John: Hello John, how are you? John-->>Alice: Great!
sequenceDiagram
    Alice->>John: Hello John, how are you?
    John-->>Alice: Great!

6.4.1. Using aliases

sequenceDiagram participant A as Alice participant J as John A->>J: Hello John, how are you? J->>A: Great!
sequenceDiagram
    participant A as Alice
    participant J as John
    A->>J: Hello John, how are you?
    J->>A: Great!

6.4.2. Adding notes

sequenceDiagram participant John Note right of John: Text in note
sequenceDiagram
    participant John
    Note right of John: Text in note
sequenceDiagram Alice->John: Hello John, how are you? Note over Alice, John: A typical interaction
sequenceDiagram
    Alice->John: Hello John, how are you?
    Note over Alice,John: A typical interaction
graph TD; A-->B; A-->C; B-->D; C-->D;
graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;

6.5. Gant chart

%% Example of sequence diagram sequenceDiagram Alice->>Bob: Hello Bob, how are you? alt is sick Bob->>Alice: Not so good :( else is well Bob->>Alice: Feeling fresh like a daisy end opt Extra response Bob->>Alice: Thanks for asking end

6.5.1. Complex

sequenceDiagram participant DB participant Server participant Client participant GUI Server-->>DB: CONNECT DB-->>Server: CONNECTED GUI->>+Client: ONLINE Note over Client: readConfig Client-->>Server: CONNECT Server-->>Client: CONNECTED Client->>+GUI: GET CREDENTIALS Note over GUI: loginDialog GUI->>-Client: CREDENTIALS Note over Client: scrambleLogin Client->>+Server: LOGIN Server->>+DB: AUTH Note over DB: authQuery DB->>-Server: AUTH REPLY Note over Server: newSession Server->>-Client: LOGIN REPLY Client->>-GUI: STATUS
sequenceDiagram
    participant DB
    participant Server
    participant Client
    participant GUI
    Server-->>DB: CONNECT
    DB-->>Server: CONNECTED
    GUI->>+Client: ONLINE
    Note over Client: readConfig
    Client-->>Server: CONNECT
    Server-->>Client: CONNECTED
    Client->>+GUI: GET CREDENTIALS
    Note over GUI: loginDialog
    GUI->>-Client: CREDENTIALS
    Note over Client: scrambleLogin
    Client->>+Server: LOGIN
    Server->>+DB: AUTH
    Note over DB: authQuery
    DB->>-Server: AUTH REPLY
    Note over Server: newSession
    Server->>-Client: LOGIN REPLY
    Client->>-GUI: STATUS

6.6. Gant

https://mermaidjs.github.io/gantt.html

6.6.0.1. Simple
gantt title A Gantt Diagram dateFormat YYYY-MM-DD section Section A task :a1, 2014-01-01, 30d Another task :after a1 , 20d section Another Task in sec :2014-01-12 , 12d another task : 24d
gantt
    title A Gantt Diagram
    dateFormat  YYYY-MM-DD
    section Section
    A task          :a1, 2014-01-01, 30d
    Another task     :after a1  , 20d
    section Another
    Task in sec   :2014-01-12  , 12d
    another task      : 24d

6.6.1. A second Gantt chart

gantt dateFormat YYYY-MM-DD title GANTT diagram functionality to mermaid section A section Completed task :done, des1, 2014-01-06,2014-01-08 Active task :active, des2, 2014-01-09, 3d Future task : des3, after des2, 5d Future task2 : des4, after des3, 5d section Critical tasks Completed task in the critical line :crit, done, 2014-01-06,24h Implement parser and jison :crit, done, after des1, 2d Create tests for parser :crit, active, 3d Future task in critical line :crit, 5d Create tests for renderer :2d Add to mermaid :1d section Documentation Describe gantt syntax :active, a1, after des1, 3d Add gantt diagram to demo page :after a1 , 20h Add another diagram to demo page :doc1, after a1 , 48h section Last section Describe gantt syntax :after doc1, 3d Add gantt diagram to demo page :20h Add another diagram to demo page :48h
gantt
        dateFormat  YYYY-MM-DD
        title GANTT diagram functionality to mermaid
        section A section
        Completed task          :done,  des1, 2014-01-06,2014-01-08
        Active task             :active,  des2, 2014-01-09, 3d
        Future task             :        des3, after des2, 5d
        Future task2              :      des4, after des3, 5d
        section Critical tasks
        Completed task in the critical line :crit, done, 2014-01-06,24h
        Implement parser and jison        :crit, done, after des1, 2d
        Create tests for parser          :crit, active, 3d
        Future task in critical line        :crit, 5d
        Create tests for renderer           :2d
        Add to mermaid                    :1d
        section Documentation
        Describe gantt syntax               :active, a1, after des1, 3d
        Add gantt diagram to demo page    :after a1  , 20h
        Add another diagram to demo page    :doc1, after a1  , 48h
        section Last section
        Describe gantt syntax               :after doc1, 3d
        Add gantt diagram to demo page    :20h
        Add another diagram to demo page    :48h

6.7. Atom

If you’re using Atom as editor, take a look to the Markdown Preview Enhanced plugin which also support rendering Mermaid charts directly in the editor.

7. Fichier de tests du plugin metadata

see the metadata.md source code

Ce plugin de type page html va permettre de définir des métadonnées qui seront incorporées dans la base <head> de votre page web.

7.1. Exemple

Pour l’exemple, le plugin metadata a été désactivé pour cette note-ci. Si vous affichez la note au format HTML, vous pourrez voir dans le code source qu’il n’y a presqu’aucun metadata ni même une favicon.

7.2. Activation

L’activation du plugin se fait depuis le fichier settings.json comme suit :

{    
    "plugins": {
        "page": {
            "html": {
                "metadata": {
                    "enabled": 1
                }
            }
        }
    }
}

7.3. Paramétrage

Ci-dessous un exemple de paramétrage du plugin metadata : deux variables (des patterns) sont définies. Le plugin va rechercher ces variables dans le code source du template qui sera utilisé pour l’affichage de la page.

Si une variable est présente, elle sera remplacée par le contenu du fichier associé.

{
    "plugins": {
        "options": {
            "page": {
                "html": {
                    "metadata": {
                        "key": [
                                {
                                    "pattern": "",
                                    "filename": "marknotes/plugins/page/html/metadata/metadata.txt"
                                },
                                {
                                    "pattern": "",
                                    "filename": "marknotes/plugins/page/html/metadata/favicon.txt"
                                }
                            ]
                    },
                }
            }
        }
    }
}

(sans les espaces à l’avant dernière position des mots)

8. Fichier de tests du plugin Prism

see the prism.md source code

Différentes sources ci-dessous dont la mise en page est réalisée grâce à Prim.

8.1. JSON

"debug": {
    "enabled": 0,
    "development": 0,
    "logfile": {
        "template": "[%datetime%] [%level_name%] %message% %context%"
    },
    "output": {
        "debug": 1,
        "info": 1,
        "notice": 1,
        "warning": 1,
        "error": 1,
        "critical": 1,
        "alert": 1,
        "emergency": 1
    }
}

8.2. HTML / XML

<!DOCTYPE html>
<html>
    <body>
        <h1>My First Heading</h1>
        <p>My first paragraph.</p>
    </body>
</html>
<root>
    <chapter>
        <title>A chapter's title</title>
    </chapter>
</root>

PHP

    include_once 'marknotes/includes/initialize.php';

    $class = new Includes\Initialize();

    $bReturn = $class->init();

    unset($class);

CSS

body {
    background : #FFF;
    color      : #000;
    font-family: Georgia, serif;
    line-height: 1.2;
}

JS

function ajaxify($params) {

    var $data = {};
    $data.task = (typeof $params.task === 'undefined') ? '' : $params.task;
    $data.param = (typeof $params.param === 'undefined') ? '' : $params.param;

    return true;
}

Librairie

Prism implémente la librairie Prism

Fichier de tests du plugin Robots

see the robots.md source code

Le plugin robots vous permet de définir comment doivent se comporter les moteurs de recherche vis-à-vis de votre contenu.

Doivent-ils l’indexer ? Suivre les liens ?

Le plugin robots vous donne une totale maîtrise puisque vous pourrez spécifier autant de bots que vous le souhaitez et définir un réglage par moteur de recherche ainsi que, grâce à la possibilité d’avoir plusieurs fichiers settings.json, de définir des règles différentes pour chaque partie de votre site.

Paramétrage

{
    "plugins" : {
        "options" : {
            "page" : {
                "html": {
                    "robots" : {
                        "bots": [
                            {
                                "name": "robots",
                                "content": "index, follow"
                            }
                        ]
                    }
                }
            }
        }
    }
}

Fichier de tests du plugin Share

see the share.md source code

Ce plugin va permettre l’affichage d’une icône “Partage” lorsque vous visionnez la note au format HTML.

Paramétrage

Ce plugin n’a pas de paramétrage.

Fichier de tests du plugin smiley

see the smiley.md source code

Ce plugin contient un fichier javascript qui va scanner le rendu HTML de la note pour détecter la présence de smileys et, s’il en trouve, affichera l’image associée.

Exemple

0 1 2 3 4 5 6 7 8 9 10
1. :( :-( :") :-") </3 <\3 :-/ :'( :'-( :, (
2. :, -( :( :-( <3 ]:( ]:-( O:) O:) O:-) O:-)
3. 0:) 0:-) :') :'-) :, ) :, -) :'D :'-D :, D :, -D
4. :* :-* X-) X-) : :- :O :-O :O :-O
5. :@ :-@ :D :-D :) :-) ]:) ]:-) :, '( :, '-("
6. ;( ;-( :P :-P 8-) B-) ,:( ,:-( ,:) ,:-)
7. :s :-S :z :-Z :$ :-$ ;) ;-)

Activation

L’activation du plugin se fait depuis le fichier settings.json comme suit ci-dessous mentionné.

Par défaut, le plugin smileys n’est pas activé car ce type de traitement présence l’inconvénient de remplacer “à l’aveugle” : dès qu’un pattern est rencontré, il est remplacé par la fonction javascript du plugin. Le double point suivi immédiatement d’un “s” par exemple sera remplacé par :s alors que ce n’est peut-être pas votre souhait. Ce problème est encore plus présent avec les mots de passe généré aléatoirement où la probabilité d’utiliser un tel pattern est élevé.

{
    "plugins": {
        "page": {
            "html": {
                "smileys": {
                    "enabled": 1
                }
            }
        }
    }
}

8.3. Librairie

Le plugin Smiley s’inspire du script markdown-it-emoji