Markdown Guide

This is the Markdown Guide for the ServiceChannel Developer Portal.
The guide is still in progress.

Deployment

  1. Open your terminal.
  2. Enter cd apidocs.
  3. Enter the following command:
jekyll build --source 'C:\Users\aselivanava\apidocs' --destination 'C:\DevPortal'

Formatting

Carriage Returns

New lines / carriage returns within paragraphs require two spaces at the end of the preceding line. If you don’t add two spaces, lines will be combined into one line.

Hello world
Hi there!

Hello world  
Hi there!

You can also use <wbr> to break long endpoints into several lines.

DELETE /subscribers/current/storedashboards/current/issuelist/areas/{areaId}/problemtypes/{problemType}/equipmenttypes/{equipmentType}/problemcodes}

DELETE /subscribers/current<wbr>/storedashboards<wbr>/current<wbr>/issuelist<wbr>/areas/{areaId}<wbr>/problemtypes<wbr>/{problemType}/equipmenttypes<wbr>/{equipmentType}<wbr>/problemcodes}

Bold, Italics, Strikethrough, Underline

Wrap bold text with two asterisks, italicize text with an underscore, and cross out text with two tildes.

Wrap **bold text** with two asterisks, _italicize_ text with an underscore, and ~~cross out~~ text with two tildes.

Use the <ins>...</ins> HTML tag to underline text.

Use the `<ins>...</ins>` HTML tag to <ins>underline</ins> text.

To produce a literal asterisk, underscore, or tilde, backslash escape it.

*This text is surrounded by literal asterisks*

\*This text is surrounded by literal asterisks\*

Left, Center, Right, and Justify Align

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

TEXT
{: style="text-align: left;"}

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

TEXT
{: style="text-align: center;"}

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

TEXT
{: style="text-align: right;"}

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

TEXT
{: style="text-align: justify;"}

Tooltip

The abbreviation CSS is widely used.

The abbreviation CSS is widely used.

*[CSS]: Cascading Style Sheets

Colored

This is the post content with red color, e.g. red. And this is 18-3838 Ultra Violet, which is a Pantone® color of the year 2018.

<span style="color: red;">red</span>.
<span style="color: #5F4B8B;">18-3838 Ultra Violet</span>

Lists

When you need to have sub points, put two spaces before the dash or star.

  • Item 1
  • Item 2
    • Item 2.1
    • Item 2.2
  • Item 3
  • Item 4
* Item 1
* Item 2
  * Item 2.1
  * Item 2.2
* Item 3
* Item 4

Code

Inline Code

Wrap inline code in backticks: var i = true.

Wrap inline code in backticks: `var i = true`.

To include a literal backtick character within a code span, use multiple backticks as the opening and closing delimiters:

There are literal backticks hello`my`world here.

There are literal backticks ```hello`my`world``` here.

Fenced Code

To have a code block, wrap your code with three ticks. Add a language name after the first three ticks.

<strong>New Site Features</strong>
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
</ul>
<p>Next paragraph.</p>
```html
<strong>New Site Features</strong>
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
</ul>
<p>Next paragraph.</p>
```

You can also wrap code snippets with tildes:

<strong>New Site Features</strong>
<p>Next paragraph.</p>
~~~~
<strong>New Site Features</strong>
<p>Next paragraph.</p>
~~~~

As an alternative, indent every line of the block by at least 4 spaces. A code block continues until it reaches a line that is not indented (or the end of the page).

This is a normal paragraph.

This is a code block.
This is a normal paragraph.

    This is a code block.

Highlight Tag Code

1
2
<nav class="pagination" role="navigation">
</nav><!-- /.pagination -->
{% highlight html linenos %}
CODE
{% endhighlight %}

Code Blocks in Lists

To include code snippets into lists, indent code block with spaces.

API-Related

API Methods

API methods appear on different backgrounds depending on the API verb.

GET ENDPOINT

POST ENDPOINT

PUT ENDPOINT

DELETE ENDPOINT

**GET ENDPOINT**
{: .notice--info}

**POST ENDPOINT**
{: .notice--success}

**PUT ENDPOINT**
{: .notice--warning}

**DELETE ENDPOINT**
{: .notice--danger}

Example Request and Response

Copy the text from the file to have a template for example request and response.

Open TXT

Links

Anchor Link

An anchor link is a link to a section on the current page.

This link is a link to Formatting section on this page. An anchor name is a section title where spaces are replaced with hyphens - and capital letters and replaced with lowercase letters. Omit dots . when they’re present in section titles.

[link displayed text](#anchor-name)

Link Inside the Dev Portal

See Creating a WO Using IssueList for more information. A link to a page must end with a backslash /. If the link contains an anchor link, it should not end with a backslash /.

[link displayed text]({{base_path}}/URL/)
[link displayed text]({{base_path}}/URL/#anchor-name)

External Link

This is an example of a link to Apple.

[link displayed text](URL)

This is an example of a link to Apple with a tooltip.

[link displayed text](URL "tooltip")

This is an example of a link that opens in a new tab.

[link displayed text](URL){:target="_blank"}

Notes

Use the .notice--primary style for all notes, tips, and warnings. The blue, orange, green, and red notes are used to highlight API methods

Regular Note

Note: This note has been emphasized with the {: .notice--primary} class.

_**Important:**_ Note text.
{: .notice--primary}

_**Note:**_ Note text.
{: .notice--primary}

_**Tip:**_ Note text.
{: .notice--primary}

Other Notes

This paragraph of text has been emphasized with the {: .notice} class.

This paragraph of text has been emphasized with the {: .notice--primary} class.

This paragraph of text has been emphasized with the {: .notice--info} class.

This paragraph of text has been emphasized with the {: .notice--warning} class.

This paragraph of text has been emphasized with the {: .notice--success} class.

This paragraph of text has been emphasized with the {: .notice--danger} class.

Several Elements in One Note

Want to wrap several paragraphs or other elements in a notice? Using Liquid to capture the content and then filter it with markdownify is a good way to go.

New Site Features

  • Item 1
  • Item 2

Next paragraph.

{% capture notice-2 %}
**New Site Features**

* Item 1
* Item 2

Next paragraph.
{% endcapture %}

<div class="notice--primary">{{ notice-2 | markdownify }}</div>

Or you could skip the capture and stick with straight HTML.

New Site Features
  • Item 1
  • Item 2

Next paragraph.

<div class="notice--primary">
  <strong>New Site Features</strong>
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
  </ul>
  <p>Next paragraph.</p>
</div>

Tables

Standard Table

Header Header Header
Text Text Text
Text Text Text
Header | Header | Header
-----|-----|-----
Text | Text | Text
Text | Text | Text

To have a table with the first cell being empty, use a non-breaking space.

  Header
Text Text
Text Text
&nbsp; | Header
-----|-----
Text | Text
Text | Text

Custom-Aligned Table

Header1 Header2 Header3
cell1 cell2 cell3
cell4 cell5 cell6
cell1 cell2 cell3
cell4 cell5 cell6
Foot1 Foot2 Foot3
| Header1 | Header2 | Header3 |
|:--------|:-------:|--------:|
| cell1   | cell2   | cell3   |
| cell4   | cell5   | cell6   |
|-----------------------------|
| cell1   | cell2   | cell3   |
| cell4   | cell5   | cell6   |
|=============================|
| Foot1   | Foot2   | Foot3   |

Definition Lists

Definition List Title 1
Definition 1.
Definition List Title 2
Definition 2.
Definition List Title 1
:   Definition 1.

Definition List Title 2
:   Definition 2.

Quotes

People think focus means saying yes to the thing you’ve got to focus on.

Donec sit amet nisl.

Steve Jobs

> Quote
>
> Quote

<cite>quoteSmall</cite>
{: .small}

Blockquotes can be nested (i.e. a blockquote-in-a-blockquote):

This is the first level of quoting.

This is a nested blockquote.
This is another nested blockquote.

Back to the first level.

> This is the first level of quoting.
>
> > This is a nested blockquote.
> > This is another nested blockquote.
>
> Back to the first level.

Blockquotes can contain other Markdown elements, including headers, lists, and code blocks.

  1. Item 1.
  2. Item 2.

Here’s some code:

return shell_exec("echo $input | $markdown_script")

> 1. Item 1.
> 2. Item 2.
> 
> Here's some code:
> 
> `return shell_exec("echo $input | $markdown_script")`

Buttons

Make any link standout more when applying the .btn class.

Default Button Primary Button Success Button Warning Button Danger Button Info Button Inverse Button Light Outline Button

[Default Button](URL){: .btn}
[Primary Button](URL){: .btn .btn--primary}
[Success Button](URL){: .btn .btn--success}
[Warning Button](URL){: .btn .btn--warning}
[Danger Button](URL){: .btn .btn--danger}
[Info Button](URL){: .btn .btn--info}
[Inverse Button](URL){: .btn .btn--inverse}
[Light Outline Button](URL){: .btn .btn--light-outline}

X-Large Button Large Button Default Button Small Button

[X-Large Button](URL){: .btn .btn--primary .btn--x-large}
[Large Button](URL){: .btn .btn--primary .btn--large}
[Default Button](URL){: .btn .btn--primary }
[Small Button](URL){: .btn .btn--primary .btn--small}

Collapsible Items

You can hide content in this collapsible item.

Displayed text. Click to show more

Content that we’re hiding. You can also include tables and fenced code examples.

Displayed text
{: .collapsible}

Hidden text
{: .colcontent}

You also need to include the following string at the end of the doc:

{% include collapsible.html %}

Images

No-Zoom Image

Portal release date

![Alt text]({{base_path}}/assets/images/title.jpg)

No-Zoom Image With Tooltip

Portal release date

![Alt text]({{base_path}}/assets/images/title.jpg "Tooltip")

No-Zoom Captioned Image

Portal release date
Portal release date
{% capture fig_img %}
![Alt text]({{ "/assets/images/title.jpg" | absolute_url }})
{% endcapture %}

<figure>
  {{ fig_img | markdownify | remove: "<p>" | remove: "</p>" }}
  <figcaption>Caption text</figcaption>
</figure>

Zoom-In Image

Portal release date

[![Alt text]({{base_path}}/assets/images/title.jpg)]({{base_path}}/assets/images/title.jpg)

Zoom-In Image and Caption As a Link

Read about the Developer Portal release to learn more.
<figure>
	<a href="{{base_path}}/assets/images/title.jpg"><img src="{{base_path}}/assets/images/title.jpg"></a>
	<figcaption><a href="{{base_path}}/URL/" title="Tooltip">Link displayed text</a> and regular text.</figcaption>
</figure>

Two Zoom-In Captioned Images

Apply the half class like so to display two images side by side that share the same caption.

<figure class="half">
    <a href="{{base_path}}/assets/images/title.jpg"><img src="{{base_path}}/assets/images/title.jpg"></a>
    <a href="{{base_path}}/assets/images/title.jpg"><img src="{{base_path}}/assets/images/title.jpg"></a>
    <figcaption>Caption text</figcaption>
</figure>

And you’ll get something that looks like this:

Portal release and migration to TLS 1.2 dates

Three No-Zoom Images

Apply the third class like to display three images side by side that share the same caption.

<figure class="third">
	<img src="{{base_path}}/assets/images/title.jpg">
	<img src="{{base_path}}/assets/images/title.jpg">
	<img src="{{base_path}}/assets/images/title.jpg">
	<figcaption>Caption text</figcaption>
</figure>

And you’ll get something that looks like this:

Portal release, webhooks introduction, and migration to TLS 1.2 dates

Captioned Image As a Link

Portal release date
Click the image to read about the portal release.
{% capture fig_img %}
[![Alt text]({{base_path}}/assets/images/title.jpg)]({{base_path}}/URL/)
{% endcapture %}

{% capture fig_caption %}
Capture text.
{% endcapture %}

<figure>
  {{ fig_img | markdownify | remove: "<p>" | remove: "</p>" }}
  <figcaption>{{ fig_caption | markdownify | remove: "<p>" | remove: "</p>" }}</figcaption>
</figure>

Videos

YouTube Markdown

{% include video id="XsxDH4HcOWA" provider="youtube" %}

YouTube iFrame

This video is added via iframe.

<iframe width="640" height="360" src="https://www.youtube-nocookie.com/embed/l2Of1-d5E5o?controls=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe>

Vimeo Markdown

{% include video id="97649261" provider="vimeo" %}

Forms

Contact Details Name
Email
Date of birth
<form>
  <fieldset>
    <legend>Contact Details</legend>
    Name <input type="text" size="30"><br>
    Email <input type="text" size="30"><br>
    Date of birth <input type="text" size="10">
  </fieldset>
</form>

Emoji

Some emoji are supported, but not all! :sparkles: :camel: See this Gist or cheat sheet for the complete list of emoji.

:sparkles: :camel:

Horizontal Rules

You can produce a horizontal line with any of the following codes.






* * *

***

*****

- - - -

-----------------------