Ahmad Choirun Najib

Code enthusiast. Mobile (Android and iOS) and Web Developer

Hello World

·
#Getting Started 

Welcome to Canvas! I'm your first post demonstrating Markdown integration. Don't delete me, I'm very helpful! If you do delete me though, I can be recovered. Just grab me from:

resources/views/shared/helpers/welcome.blade.php

The Basics


Before I tell you about all the extra syntaxes and capabilities you have available to you, I'll introduce you to the basics of standard markdown. If you already know markdown, and want to jump straight to learning about the fancier things I can do, feel free to skip this section. Lets jump right in!

Markdown is a plain text formatting syntax created by John Gruber, aiming to provide a easy-to-read and feasible markup. The original Markdown syntax specification can be found here.

Typography


Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Just put angle brackets around an email and it becomes clickable: user@example.com <user@example.com>

Same thing with urls: http://example.com <http://example.com>

Perhaps you want to some link text like this: Example Website [Example Website](http://example.com "Title") (The title is optional)

Make a link [a link][arbitrary_id] then on it's own line anywhere else in the file: [arbitrary_id]: http://example.com "Title"

If the link text itself would make a good id, you can link like this [like this][], then on it's own line anywhere else in the file: [like this]: http://example.com

Option name Markup Result
Intra-word emphasis Intra-word em\*pha\*sis Intra-word emphasis
Strikethrough \~~Strikethrough\~~ Strikethrough
Underline \_Underline\_ Underline
Quote \"Quote\" Quote
Highlight \==Highlight\== Highlight
Superscript Some\^(superscript) Somesuperscript
Italics **Italics** Italics
Bold *Bold text* Bold text
HTML Entities &copy; &#402; &#8482; &reg; © ƒ ™ ®

Tables


Markup:
Key | Value
--- | ---
SSH Host | `example.com`
SSH User | `username`
SSH Password | `secret`
Database Host | `127.0.0.1`
Database User | `username`
Database Password | `secret`
Result:
Key Value
SSH Host example.com
SSH User username
SSH Password secret
Database Host 127.0.0.1
Database User username
Database Password secret

Code Blocks


Inline code is indicated by surrounding it with backticks: `Inline code`

If your code has `backticks` that need to be displayed, you can use double backticks: ``Code with `backticks` `` (mind the spaces preceding the final set of backticks)

GitHub's fenced code blocks are supported in canvas::

namespace App;

class Canvas extends Blog
{

    /**
    * Dreaming of a world without WordPress?
    *
    * @with  Canvas
    */
    public function create()
    {
        // Make something awesome...
    }
}

You can also use waves (~) instead of back ticks (`):

print('Hello world!')

Lists


Markup:
* Lists must be preceded by a blank line (or block element)
* Unordered lists start each item with a `*`
- `-` Works too
* Indent a level to make a nested list
1. Ordered lists are supported.
2. Start each item (number-period-space) like `1.`
42. It doesn't matter what number you use, it will render sequentially
Result:
  • Lists must be preceded by a blank line (or block element)
  • Unordered lists start each item with a *
  • - Works too
  • Indent a level to make a nested list
    1. Ordered lists are supported.
    2. Start each item (number-period-space) like 1
    3. It doesn't matter what number you use, it will render sequentially

Block Quotes


Markup:
> Angle brackets `>` are used for block quotes.
Technically not every line needs to start with a `>` as long as
there are no empty lines between paragraphs.
> Looks kinda ugly though.
> > Block quotes can be nested.
> > > Multiple Levels
>
> Most markdown syntaxes work inside block quotes.
Result:

Angle brackets > are used for block quotes. Technically not every line needs to start with a > as long as there are no empty lines between paragraphs. Looks kinda ugly though.

Block quotes can be nested.

Multiple Levels

Most markdown syntaxes work inside block quotes.

Horizontal Rules


If you type three asterisks ***, you will get a horizontal rule. Three dashes --- will make the same rule.

Task List Syntax


  1. [x] Support for rendering checkbox list syntax
    • [x] Support for nesting
    • [x] Support for ordered and unordered lists
  2. [ ] No support for clicking checkboxes directly in the HTML window

Markdown Extra


Canvas supports Markdown Extra, which extends traditional Markdown syntax with some nice features. If you need some help or just want a refresher, read more about Markdown syntax and Markdown Extra.

Hack On


That’s about it. The best way to be proficient in anything is to know what tools you have available to you. You're one step ahead of the game now. Happy coding!

···

Code enthusiast. Mobile (Android and iOS) and Web Developer. Familiar with Java, Typescript (Ionic and React) also CodeIgniter and Laravel
comments powered by Disqus


Proudly powered by Canvas · with Ahmad Choirun Najib