VuePress Notes

By using the vuepress dev option it is possible to create the whole site on the fly and see it live in a browser. The wonderful VS Code supports markdown quite nicely and saves automatically so the process running in the background allows me to see everything I am typing almost live.

Working Environment

Using:

  • node.js version 10.6 on Windows 10.
  • npm 6.1.0 (not sure if will use npm or yarn or neither)
  • yarn v1.7
  • vuepress 0.12.0
  • default theme at present

Config

Current config.js file contains

module.exports = {
    title: 'Learning Vue',
    evergreen: true,
    themeConfig: {
      sidebar: [
        '/',
        '/vuepress',
        '/vue',
        '/other',
        'demos',
      ]
    },
    markdown: {
      lineNumbers: true
    }
  }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

Edit

Have added groups in the sidebar now. A sidebar group is an object with three propertiesL title, collapsible (boolean), and an array of child elements.

{
    title: 'Project Descriptions',
    collapsable: false,
    children: [
    '/sendsms',
    '/sudoku'
    ]
},
1
2
3
4
5
6
7
8

Vue in markdown, first look

Each markdown page is a Vue component - it appears in the browser as if it were a separate page with .hmtl extension instead of .md after coversion to html but it is an object in the Vue instance and some Vue syntax can be used inside the markdown file.

{{ $page }}
1

refers to the object:

{ "key": "v-2dd48286276b3", "path": "/notes/vuepress.html", "title": "Learning about Vuepress", "headers": [ { "level": 2, "title": "Working Environment", "slug": "working-environment" }, { "level": 2, "title": "Config", "slug": "config" }, { "level": 2, "title": "Vue in markdown, first look", "slug": "vue-in-markdown-first-look" }, { "level": 2, "title": "Some markdown extensions", "slug": "some-markdown-extensions" }, { "level": 3, "title": "Syntax highlighting in fenced code blocks", "slug": "syntax-highlighting-in-fenced-code-blocks" }, { "level": 3, "title": "Tables", "slug": "tables" }, { "level": 3, "title": "Bootstrap style alerts", "slug": "bootstrap-style-alerts" } ], "frontmatter": { "title": "Learning about Vuepress", "lang": "en-GB", "meta": [ { "name": "description", "content": "A novice view of VuePress" } ], "arbitrary": "some value" } }

which means that, for example if for some reason one wanted to do it one could by referring to

{{$page.frontmatter.arbitrary}}
1

one could insert some value into a page.

Some markdown extensions

These extensions are documented aton the VuePress Site.

Previously used the emoji for confused 😕

:confused:
1

The full list of emojis is available on github. It is probably unwise to use them but if they are supported it probably means they work cross-browser (need to get access to Safari somehow)... As It write this the time is 🕤 in the evening.

Syntax highlighting in fenced code blocks

require 'redcarpet'
markdown = Redcarpet.new("Hello World!")
puts markdown.to_html
1
2
3
if (empty($_POST["from"])) {
    $fromErr = "From is required";
    $cansend = 0;
} else {
    $from = test_input($_POST["from"]);
    if (!preg_match("/^[a-zA-Z ]*$/",$from)) {
        $fromErr = "Only letters and white space allowed";
    }
    if (strlen($from)> 11){
        $fromErr = "Maximum 11 characters";
    }
}
1
2
3
4
5
6
7
8
9
10
11
12






 







watch: {
    messageText: function(val){
        this.messageLength = val.length + ' characters';
    },
    fromText: function(str){
        if (str.length > 11) {
            this.truncatedFrom = 'Will be truncated to ' + str.substr(0,11);
        }
        else{
            this.truncatedFrom = '';
        }
    }
},
1
2
3
4
5
6
7
8
9
10
11
12
13

Tables

Left-alignedCenter-alignedRight-aligned
textcontent99.2
another rowmore stuff0.8
zebra stripingis auto100

Bootstrap style alerts

Handy Hint

This is a tip

Take Care

This is a warning

DO NOT PROCEED

This is a dangerous warning