Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feature/markdown docs rc6 #70

Merged
merged 6 commits into from
Sep 13, 2016
Merged

Feature/markdown docs rc6 #70

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
70ca655
added own file for markdown.module and added forRoot() method
Sep 12, 2016
a5c4e3a
updated README.md
Sep 12, 2016
8b66cfa
updated docs
Sep 12, 2016
e730d6c
update(markdown): remove bugs, better docs
Sep 12, 2016
8bbda50
update(components): more accurate markdown desc
Sep 12, 2016
ed1eb61
update(markdown): proper blockquotes
Sep 12, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/app/app.module.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ import { CovalentChipsModule } from '../platform/chips';
CovalentCoreModule.forRoot(),
CovalentFileModule.forRoot(),
CovalentHighlightModule,
CovalentMarkdownModule,
CovalentMarkdownModule.forRoot(),
CovalentJsonFormatterModule,
CovalentChipsModule,
appRoutes,
Expand Down
2 changes: 1 addition & 1 deletion src/app/components/components/components.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,7 @@ export class ComponentsComponent {
route: 'json-formatter',
title: 'JSON Formatter',
}, {
description: 'Parse markdown files.',
description: 'Parse markdown code',
icon: 'chrome_reader_mode',
route: 'markdown',
title: 'Markdown',
Expand Down
2 changes: 1 addition & 1 deletion src/app/components/components/components.module.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@ import { CovalentChipsModule } from '../../../platform/chips';
CovalentCoreModule.forRoot(),
CovalentFileModule.forRoot(),
CovalentHighlightModule,
CovalentMarkdownModule,
CovalentMarkdownModule.forRoot(),
CovalentJsonFormatterModule,
CovalentChipsModule,
componentsRoutes,
Expand Down
234 changes: 161 additions & 73 deletions src/app/components/components/markdown/markdown.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,12 @@
<md-card>
<md-card-title>Markdown</md-card-title>
<md-card-subtitle>Parse markdown files</md-card-subtitle>
<md-card-subtitle>Parse markdown code</md-card-subtitle>
<md-divider></md-divider>
<md-card-content>
<md-card>
<md-card-content><h4>Imporant Note:</h4>You must wrap all markdown in <code>&lt;pre&gt;&lt;code&gt;&lt;/code&gt;&lt;/pre&gt;</code> and maintain whitespace.</md-card-content>
</md-card>
<h3>Basic Markdown</h3>
<td-markdown>
<pre><code>
# Heading (H1)
Expand All @@ -17,46 +21,86 @@
* Two
* Three

## GH Flavored Block quotes & Tasklist

#### Tasklists
- [ ] This is still pending
- [x] This task is done

#### Inline Code `Github`

Emphasis, aka italics, with *asterisks* or _underscores_.

Strong emphasis, aka bold, with **asterisks** or __underscores__.

Combined emphasis with **asterisks and _underscores_**.
</code></pre>
</td-markdown>
<td-highlight lang="html">
<![CDATA[
<td-markdown>
<pre><code>
# Heading (H1)

## Sub Heading (H2)

### Steps (H3)

###List Items

* One
* Two
* Three

Emphasis, aka italics, with *asterisks* or _underscores_.

Strikethrough uses two tildes. ~~Scratch this.~~
Strong emphasis, aka bold, with **asterisks** or __underscores__.

##Links
Combined emphasis with **asterisks and _underscores_**.
</code></pre>
</td-markdown>
]]>
</td-highlight>
<h3>Links &amp; Images</h3>
<p>There are two ways to create links. Inline & reference:</p>
<td-markdown>
<pre><code>
[I'm an inline-style link](https://teradata.github.io/)

<p>There are two ways to create links.</p>
[I'm a reference-style link case does not matter][Teradata Github Landing]

[I'm an inline-style link](https://www.google.com)
[teradata github Landing]: https://teradata.github.io/

##Images
Inline image
![alt text here](app/assets/icons/teradata.svg)

Reference-style:
Reference-style image:
![alt text][logo]

[logo]: http://www.teradata.com/images/Homepage2015/teradata-logo-2x.png "Teradata Labs"
</code></pre>
[logo]: app/assets/icons/teradata.svg "Teradata Labs"
</code></pre>
</td-markdown>
<td-highlight lang="html">
<![CDATA[
<td-markdown>
<pre><code>
[I'm an inline-style link](https://teradata.github.io/)

<p>Here's our logo (hover to see the title text):</p>
[I'm a reference-style link case does not matter][Teradata Github Landing]

<pre><code>Inline `code` has `back-ticks` around it.
</code></pre>
[teradata github Landing]: https://teradata.github.io/

<p>Inline <code>code</code> has <code>back-ticks around</code> it.</p>
Inline image
![alt text here](app/assets/icons/teradata.svg)

<p>Blocks of code are either fenced by lines with three back-ticks <code>```</code>, or are indented with four spaces. I recommend only using the fenced code blocks -- they're easier and only they support syntax highlighting.</p>
Reference-style image:
![alt text][logo]

<pre lang="no-highlight"><code>```javascript
[logo]: app/assets/icons/teradata.svg "Teradata Labs"
</code></pre>
</td-markdown>
]]>
</td-highlight>
<h3>Inline Code &amp; Snippets</h3>
<p>Inline has `back-ticks` around it.</p>
<p>Blocks of code are either fenced by lines with three back-ticks <code>```</code>, or are indented with four spaces. </p>
<td-markdown>
<pre><code>
`this is an inline code snippet`

```javascript
var s = "JavaScript syntax highlighting";
alert(s);
```
Expand All @@ -65,34 +109,56 @@
s = "Python syntax highlighting"
print s
```
</code></pre>
</code></pre>
</td-markdown>
<td-highlight lang="html">
<![CDATA[
<td-markdown>
<pre><code>
`this is an inline code snippet`

<p>
Blockquotes
```javascript
var s = "JavaScript syntax highlighting";
alert(s);
```

<pre lang="no-highlight"><code>&gt; Blockquotes are very handy in email to emulate reply text.
&gt; This line is part of the same quote.
```python
s = "Python syntax highlighting"
print s
```
</code></pre>
</td-markdown>
]]>
</td-highlight>
<h3>Blockquotes</h3>
<td-markdown>
<pre><code>
> Blockquotes are very handy in email to emulate reply text.
> This line is part of the same quote.

Quote break.

&gt; This is a very long line that will still be quoted properly when it wraps. Oh boy let's keep writing to make sure this is long enough to actually wrap for everyone. Oh, you can *put* **Markdown** into a blockquote.
</code></pre>

<blockquote>
<p>Blockquotes are very handy in email to emulate reply text.
This line is part of the same quote.</p>
</blockquote>

<p>Quote break.</p>

<blockquote>
<p>This is a very long line that will still be quoted properly when it wraps. Oh boy let's keep writing to make sure this is long enough to actually wrap for everyone. Oh, you can <em>put</em> <strong>Markdown</strong> into a blockquote.</p>
</blockquote>

<p>Inline HTML
> This is a very long line that will still be quoted properly when it wraps. Oh boy let's keep writing to make sure this is long enough to actually wrap for everyone. Oh, you can *put* **Markdown** into a blockquote.
</code></pre>
</td-markdown>
<td-highlight lang="html">
<![CDATA[
<td-markdown>
<pre><code>
> Blockquotes are very handy in email to emulate reply text.
> This line is part of the same quote.

Quote break.

<pre><code>Three or more...
> This is a very long line that will still be quoted properly when it wraps. Oh boy let's keep writing to make sure this is long enough to actually wrap for everyone. Oh, you can *put* **Markdown** into a blockquote.
</code></pre>
</td-markdown>
]]>
</td-highlight>
<h3>Dividers</h3>
<td-markdown>
<pre><code>
Three or more...

---

Expand All @@ -105,21 +171,55 @@
___

Underscores
</code></pre>
</code></pre>
</td-markdown>
<td-highlight lang="html">
<![CDATA[
<td-markdown>
<pre><code>
Three or more...

---

Hyphens

***

</td-markdown>
Asterisks

___

Underscores
</code></pre>
</td-markdown>
]]>
</td-highlight>
</md-card-content>
</md-card>
<md-card>
<md-card-title>TdMarkdownComponent</md-card-title>
<md-card-subtitle>How to use this component</md-card-subtitle>
<md-divider></md-divider>
<md-card-content>
<h2><code><![CDATA[<td-markdown>]]></code></h2>
<p>Use <code><![CDATA[<td-markdown>]]></code> element to parse the markdown files</p>
<p>Wrap your code snippets in <code><![CDATA[<td-markdown>]]></code></p>
<p>Note: <code>showdown.js</code> needs to be added as vendor and referenced in `index.html`.</p>
<td-highlight lang="javascript">
<h2><code><![CDATA[<td-markdown>]]></code></h2>
<p>Use <code><![CDATA[<td-markdown>]]></code> element to parse the markdown files</p>
<p>Wrap your code snippets in <code><![CDATA[<td-markdown>]]></code></p>
<h3>Example:</h3>
<p>HTML</p>
<td-highlight lang="html">
<![CDATA[
<td-markdown>
<pre><code>
# Heading
## Sub Heading (H2)
### Steps (H2)
</code></pre>
</td-markdown>
]]>
</td-highlight>
<h3>Setup:</h3>
<p><code>showdown.js</code> needs to be added as vendor and referenced in `index.html`.</p>
<td-highlight lang="javascript">
module.exports = function(defaults) {{'{'}}
return new Angular2App(defaults, {{'{'}}
vendorNpmFiles: [
Expand All @@ -129,36 +229,24 @@ <h2><code><![CDATA[<td-markdown>]]></code></h2>
});
};
</td-highlight>
and
<p>Reference the script in the `index.html` file.</p>
<td-highlight lang="html">
<![CDATA[
<script src="vendor/showdown/dist/showdown.js"></script>
]]>
</td-highlight>
<h3>Example:</h3>
<p>HTML</p>

<p>Then, import the [CovalentMarkdownModule] using the forRoot() method in your NgModule:</p>
<td-highlight lang="html">
<![CDATA[
<td-markdown>
<pre><code>
# Heading
## Sub Heading (H2)
### Steps (H2)
</code></pre>
</td-markdown>
]]>
</td-highlight>
<p>Typescript:</p>
<td-highlight lang="typescript">
<![CDATA[
import { TdMarkdownComponent } from '@covalent/markdown';
...
directives: [ TdMarkdownComponent ]
import { CovalentMarkdownModule } from '@covalent/markdown';
@NgModule({
imports: [
CovalentMarkdownModule.forRoot(),
...
],
...
})
export class Demo {

}
export class MyModule {}
]]>
</td-highlight>
</md-card-content>
Expand Down
Loading