100 lines
3.4 KiB
Plaintext
100 lines
3.4 KiB
Plaintext
#sg-code.showcase.shadow-1
|
|
header.showcase-header
|
|
h2 Code Examples
|
|
p Below are some examples of how you can add/customize code examples in a page.
|
|
|
|
strong.l-space-top-3.l-space-bottom-1 ATTRIBUTES:
|
|
ul
|
|
li <strong>name</strong> Name displayed in Tab (required for tabs)
|
|
li <strong>language</strong> javascript, html, etc.
|
|
li <strong>escape</strong> html (escapes html, woot!)
|
|
li <strong>format</strong> linenums (or linenums:4 specify starting line)
|
|
|
|
.showcase-content
|
|
|
|
.l-sub-section
|
|
h3 Inline Code Examples
|
|
|
|
p.
|
|
Inline code example <code ng-non-bindable>{{username}}</code>
|
|
|
|
code-example(format="linenums" language="html" escape="html").
|
|
Inline code example <code ng-non-bindable>{{username}}</code>
|
|
|
|
p.
|
|
Notice the <strong>ng-non-bindable</strong> attribute. This is only
|
|
needed when using code examples inline <strong>code-tabs and code-example directives
|
|
automatically do this</strong>.
|
|
|
|
.l-sub-section
|
|
h3 Adding a code example
|
|
|
|
code-example(format="linenums" language="html").
|
|
code-example(format="linenums" language="javascript").
|
|
//SOME CODE
|
|
|
|
.l-sub-section
|
|
h3 Specify starting line number
|
|
|
|
code-example(language="javascript" format="linenums:4").
|
|
code-example(language="html" format="linenums:4").
|
|
var title = "This starts on line four";
|
|
|
|
.l-sub-section
|
|
h3 Specify a language
|
|
|
|
p.
|
|
Prettify makes a best effort to guess the language but
|
|
works best with C-like and HTML-like languages. For
|
|
others, there are special language handlers that are
|
|
chosen based on language hints. Add a class that matches
|
|
your desired language (example below uses <strong>.lang-html</strong>)
|
|
|
|
code-example(language="html" format="linenums").
|
|
h1 Title
|
|
p This is some copy...
|
|
|
|
.l-sub-section
|
|
h3 Code Highlighting
|
|
p.
|
|
There are three types of highlights avialable
|
|
<strong>Outlined</strong>, <strong>Pink</strong>, and
|
|
<strong>Black</strong>. You can see examples below and
|
|
the class names needed for each type.
|
|
|
|
code-example(format="linenums").
|
|
// Pink Background Version
|
|
// class="pnk"
|
|
var elephants = "The <span class='pnk'>pink</span> elephants were marching...";
|
|
|
|
// Black Background Version
|
|
// class="blk"
|
|
var night = "The night was pitch <span class='blk'>black</span>.";
|
|
|
|
// Outlined Version
|
|
// class="otl"
|
|
var match = "The <span class='otl'>bird</span> ate <span class='otl'>bird</span> seed near the <span class='otl'>bird</span> bath ";
|
|
|
|
.l-sub-section
|
|
h3 Code Tabs
|
|
p.
|
|
Code Tabs are a great way to show different languages and versions
|
|
of a particular piece of code. When using these tabs make sure the
|
|
<stron>content is always related</strong>.
|
|
|
|
code-tabs
|
|
code-pane(language="javascript" format="linenums" name="ES5").
|
|
// ES5
|
|
var hello = 'blah';
|
|
|
|
code-pane(language="javascript" format="linenums" name="TypeScript").
|
|
// TypeScript
|
|
var hello = 'blah';
|
|
|
|
p To create code tabs simply use the directives below
|
|
code-example(format="linenums").
|
|
code-tabs
|
|
code-pane(format="linenums" name="Tab 1").
|
|
// TAB 1 CONTENT
|
|
code-pane(format="linenums" name="Tab 2").
|
|
// TAB 2 CONTENT |