Skip to content
This repository was archived by the owner on Feb 6, 2024. It is now read-only.

Commit

Permalink
docs(#525): code in styled cards
Browse files Browse the repository at this point in the history
  • Loading branch information
@peterpeterparker
peterpeterparker committed Dec 11, 2019
1 parent 1c2171f commit f0a8567
Show file tree
Hide file tree
Showing 3 changed files with 162 additions and 21 deletions.
49 changes: 38 additions & 11 deletions .../docs/components/app-components-highlight-code/app-components-highlight-code.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,8 @@ The "Highlight Code" component is an extra component which let you highlight cod

To highlight your code, this component is using [Prism.js](https://prismjs.com) from [Lea Verou](http://lea.verou.me) and [James DiGioia](https://twitter.com/jamesdigioia).

Moreover, per default, your code will be displayed in form of a stylish "windowed" card as the amazing [carbon](https://carbon.now.sh), the tool to create and share beautiful images of your source code, would do.

## Table of contents

- [Showcase](#app-components-highlight-code-showcase)
Expand Down Expand Up @@ -87,7 +89,8 @@ The `<deckgo-highlight-code/>` expose the following properties:
| `language` | `language` | Define the language to be used for the syntax highlighting. The list of [supported languages](https://prismjs.com/#languages-list) is defined by [Prism.js](https://prismjs.com/#languages-list) | `string` | `'javascript'` |
| `highlightLines` | `highlight-lines` | If you wish to highlight some lines of your code. The lines number should be provided as number separated with coma and group separated with space. For example: "3,5 8,9 13,13 14,17" | `string` | |
| `lineNumbers` | `line-numbers` | Display the number of the lines of code | `boolean` | `false` |
| `editable` | `editable` | In case you would like to set the code component as being editable. | `boolean` | `false` |
| `editable` | `editable` | In case you would like to set the code component as being editable. | `boolean` | `false` |
| `carbon` | `carbon` | Present the code in a stylish "windowed" card. | `boolean` | `true` |

### Styling

Expand All @@ -98,9 +101,9 @@ The `<deckgo-highlight-code/>` could be styled using the following CSS4 variable
| --deckgo-highlight-code-display | block | The display property of the code |
| --deckgo-highlight-code-color | inherit | The color of the displayed code |
| --deckgo-highlight-code-background | | The background of the displayed code |
| --deckgo-highlight-code-padding | | The padding of the displayed code |
| --deckgo-highlight-code-padding | 0 16px | The padding of the displayed code |
| --deckgo-highlight-code-border-radius | | The border radius of the displayed code |
| --deckgo-highlight-code-margin-bottom | 64px | Margin bottom of the code scroller |
| --deckgo-highlight-code-margin-bottom | 0 16px | Margin bottom of the code scroller |
| --deckgo-highlight-code-zoom | 1 | If you wish to manually zoom the code |
| --deckgo-highlight-code-font-size | | The size of the font for the code |
| --deckgo-highlight-code-font-family | monospace | The family of the font for the code |
Expand All @@ -110,14 +113,14 @@ The `<deckgo-highlight-code/>` could be styled using the following CSS4 variable
| --deckgo-highlight-code-line-border-top | | The border-top property of the lines you wish to highlight |
| --deckgo-highlight-code-direction | ltr | The direction of the displayed code |
| --deckgo-highlight-code-text-align | start | The text alignment of your code |
| --deckgo-highlight-code-token-comment | | Highlighted code tokens comment, prolog, doctype and cdata |
| --deckgo-highlight-code-token-punctuation | | Highlighted code token punctuation |
| --deckgo-highlight-code-token-property | | Highlighted code tokens property, tag, boolean, number, constant, symbol, deleted |
| --deckgo-highlight-code-token-selector | | Highlighted code tokens selector, attr-name, string, char, builtin, inserted |
| --deckgo-highlight-code-token-operator | | Highlighted code tokens operator, entity, url, string |
| --deckgo-highlight-code-token-atrule | | Highlighted code tokens atrule, attr-value, keyword |
| --deckgo-highlight-code-token-function | | Highlighted code function, class-name |
| --deckgo-highlight-code-token-regex | | Highlighted code tokens regex, important, variable |
| --deckgo-highlight-code-token-comment | #6272a4 | Highlighted code tokens comment, prolog, doctype and cdata |
| --deckgo-highlight-code-token-punctuation | inherit | Highlighted code token punctuation |
| --deckgo-highlight-code-token-property | #bd93f9 | Highlighted code tokens property, tag, boolean, number, constant, symbol, deleted |
| --deckgo-highlight-code-token-selector | #50fa7b | Highlighted code tokens selector, attr-name, string, char, builtin, inserted |
| --deckgo-highlight-code-token-operator | #ff79c6 | Highlighted code tokens operator, entity, url, string |
| --deckgo-highlight-code-token-atrule | #ff79c6 | Highlighted code tokens atrule, attr-value, keyword |
| --deckgo-highlight-code-token-function | #ffb86c | Highlighted code function, class-name |
| --deckgo-highlight-code-token-regex | #f1fa8c | Highlighted code tokens regex, important, variable |
| --deckgo-highlight-code-empty-text | "Click to add your code" | Place holder in case the `editable` is set to `true` |
| --deckgo-highlight-code-scroll | scroll | In case you would like to change the scroll property of the shadowed code block |
| --deckgo-highlight-code-container-width | | The attribute width of the code's container |
Expand All @@ -127,6 +130,30 @@ The `<deckgo-highlight-code/>` could be styled using the following CSS4 variable
| --deckgo-highlight-code-container-flex-direction | | The attribute flex-direction of the code's container |
| --deckgo-highlight-code-container-align-items | | The attribute align-items of the code's container |

Furthermore the following styles apply if the code is displayed as a "windowed" card (`carbon` property equals to `true`):

| CSS4 variable | Default | Note |
| -------------------------- |-----------------|-----------------|
| --deckgo-highlight-code-carbon-display | block | The display property of the host container. |
| --deckgo-highlight-code-carbon-overflow | auto | The overflow property of the host container. |
| --deckgo-highlight-code-carbon-border | | The border property of the host container. |
| --deckgo-highlight-code-carbon-border-radius | 4px | The border-radius property of the host container. |
| --deckgo-highlight-code-carbon-background | #282a36 | The background property of the host container. |
| --deckgo-highlight-code-carbon-color | white | The color property of the host container. |
| --deckgo-highlight-code-carbon-box-shadow | rgba(0, 0, 0, 0.55) 0 8px 16px | The box-shadow property of the host container. |
| --deckgo-highlight-code-carbon-margin | 16px | The margin property of the host container. |
| --deckgo-highlight-code-carbon-header-padding | 16px | The padding property of the card header. |
| --deckgo-highlight-code-carbon-header-button-width | 12px | The width of a button of the card header. |
| --deckgo-highlight-code-carbon-header-button-heeght | 12px | The height of a button of the card header. |
| --deckgo-highlight-code-carbon-header-button-border-radius | 50% | The border-radius of a button of the card header. |
| --deckgo-highlight-code-carbon-header-button-margin | 0 6px 0 0 | The margin of a button of the card header. |
| --deckgo-highlight-code-carbon-header-button-red-background | #FF5F56 | The background of the first button of the card header. |
| --deckgo-highlight-code-carbon-header-button-red-border | 0.5px solid #E0443E | The border of the first button of the card header. |
| --deckgo-highlight-code-carbon-header-button-yellow-background | #FFBD2E | The background of the second button of the card header. |
| --deckgo-highlight-code-carbon-header-button-yellow-border | 0.5px solid #DEA123 | The border of the second button of the card header. |
| --deckgo-highlight-code-carbon-header-button-green-background | #27C93F | The background of the third button of the card header. |
| --deckgo-highlight-code-carbon-header-button-green-border | 0.5px solid #1AAB29 | The color of the third button of the card header. |

### Methods

The `<deckgo-highlight-code/>` expose the following methods:
Expand Down
133 changes: 123 additions & 10 deletions ...app/pages/docs/components/app-components-highlight-code/app-components-highlight-code.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@ export class AppComponentsHighlightCode {
<main><h1 id="app-components-highlight-code-highlight-code">Highlight Code</h1>
<p>The &quot;Highlight Code&quot; component is an extra component which let you highlight code easily.</p>
<p>To highlight your code, this component is using <a href="https://prismjs.com">Prism.js</a> from <a href="http://lea.verou.me">Lea Verou</a> and <a href="https://twitter.com/jamesdigioia">James DiGioia</a>.</p>
<p>Moreover, per default, your code will be displayed in form of a stylish &quot;windowed&quot; card as the amazing <a href="https://carbon.now.sh">carbon</a>, the tool to create and share beautiful images of your source code, would do.</p>
<h2 id="app-components-highlight-code-table-of-contents">Table of contents</h2>
<ul>
<li><a href="#app-components-highlight-code-showcase">Showcase</a></li>
Expand Down Expand Up @@ -139,6 +140,13 @@ export class AppComponentsHighlightCode {
<td><code>boolean</code></td>
<td><code>false</code></td>
</tr>
<tr>
<td><code>carbon</code></td>
<td><code>carbon</code></td>
<td>Present the code in a stylish &quot;windowed&quot; card.</td>
<td><code>boolean</code></td>
<td><code>true</code></td>
</tr>
</tbody></table>
<h3 id="app-components-highlight-code-styling">Styling</h3>
<p>The <code>&lt;deckgo-highlight-code/&gt;</code> could be styled using the following CSS4 variables:</p>
Expand Down Expand Up @@ -167,7 +175,7 @@ export class AppComponentsHighlightCode {
</tr>
<tr>
<td>--deckgo-highlight-code-padding</td>
<td></td>
<td>0 16px</td>
<td>The padding of the displayed code</td>
</tr>
<tr>
Expand All @@ -177,7 +185,7 @@ export class AppComponentsHighlightCode {
</tr>
<tr>
<td>--deckgo-highlight-code-margin-bottom</td>
<td>64px</td>
<td>0 16px</td>
<td>Margin bottom of the code scroller</td>
</tr>
<tr>
Expand Down Expand Up @@ -227,42 +235,42 @@ export class AppComponentsHighlightCode {
</tr>
<tr>
<td>--deckgo-highlight-code-token-comment</td>
<td></td>
<td>#6272a4</td>
<td>Highlighted code tokens comment, prolog, doctype and cdata</td>
</tr>
<tr>
<td>--deckgo-highlight-code-token-punctuation</td>
<td></td>
<td>inherit</td>
<td>Highlighted code token punctuation</td>
</tr>
<tr>
<td>--deckgo-highlight-code-token-property</td>
<td></td>
<td>#bd93f9</td>
<td>Highlighted code tokens property, tag, boolean, number, constant, symbol, deleted</td>
</tr>
<tr>
<td>--deckgo-highlight-code-token-selector</td>
<td></td>
<td>#50fa7b</td>
<td>Highlighted code tokens selector, attr-name, string, char, builtin, inserted</td>
</tr>
<tr>
<td>--deckgo-highlight-code-token-operator</td>
<td></td>
<td>#ff79c6</td>
<td>Highlighted code tokens operator, entity, url, string</td>
</tr>
<tr>
<td>--deckgo-highlight-code-token-atrule</td>
<td></td>
<td>#ff79c6</td>
<td>Highlighted code tokens atrule, attr-value, keyword</td>
</tr>
<tr>
<td>--deckgo-highlight-code-token-function</td>
<td></td>
<td>#ffb86c</td>
<td>Highlighted code function, class-name</td>
</tr>
<tr>
<td>--deckgo-highlight-code-token-regex</td>
<td></td>
<td>#f1fa8c</td>
<td>Highlighted code tokens regex, important, variable</td>
</tr>
<tr>
Expand Down Expand Up @@ -306,6 +314,111 @@ export class AppComponentsHighlightCode {
<td>The attribute align-items of the code&#39;s container</td>
</tr>
</tbody></table>
<p>Furthermore the following styles apply if the code is displayed as a &quot;windowed&quot; card (<code>carbon</code> property equals to <code>true</code>):</p>
<table>
<thead>
<tr>
<th>CSS4 variable</th>
<th>Default</th>
<th>Note</th>
</tr>
</thead>
<tbody><tr>
<td>--deckgo-highlight-code-carbon-display</td>
<td>block</td>
<td>The display property of the host container.</td>
</tr>
<tr>
<td>--deckgo-highlight-code-carbon-overflow</td>
<td>auto</td>
<td>The overflow property of the host container.</td>
</tr>
<tr>
<td>--deckgo-highlight-code-carbon-border</td>
<td></td>
<td>The border property of the host container.</td>
</tr>
<tr>
<td>--deckgo-highlight-code-carbon-border-radius</td>
<td>4px</td>
<td>The border-radius property of the host container.</td>
</tr>
<tr>
<td>--deckgo-highlight-code-carbon-background</td>
<td>#282a36</td>
<td>The background property of the host container.</td>
</tr>
<tr>
<td>--deckgo-highlight-code-carbon-color</td>
<td>white</td>
<td>The color property of the host container.</td>
</tr>
<tr>
<td>--deckgo-highlight-code-carbon-box-shadow</td>
<td>rgba(0, 0, 0, 0.55) 0 8px 16px</td>
<td>The box-shadow property of the host container.</td>
</tr>
<tr>
<td>--deckgo-highlight-code-carbon-margin</td>
<td>16px</td>
<td>The margin property of the host container.</td>
</tr>
<tr>
<td>--deckgo-highlight-code-carbon-header-padding</td>
<td>16px</td>
<td>The padding property of the card header.</td>
</tr>
<tr>
<td>--deckgo-highlight-code-carbon-header-button-width</td>
<td>12px</td>
<td>The width of a button of the card header.</td>
</tr>
<tr>
<td>--deckgo-highlight-code-carbon-header-button-heeght</td>
<td>12px</td>
<td>The height of a button of the card header.</td>
</tr>
<tr>
<td>--deckgo-highlight-code-carbon-header-button-border-radius</td>
<td>50%</td>
<td>The border-radius of a button of the card header.</td>
</tr>
<tr>
<td>--deckgo-highlight-code-carbon-header-button-margin</td>
<td>0 6px 0 0</td>
<td>The margin of a button of the card header.</td>
</tr>
<tr>
<td>--deckgo-highlight-code-carbon-header-button-red-background</td>
<td>#FF5F56</td>
<td>The background of the first button of the card header.</td>
</tr>
<tr>
<td>--deckgo-highlight-code-carbon-header-button-red-border</td>
<td>0.5px solid #E0443E</td>
<td>The border of the first button of the card header.</td>
</tr>
<tr>
<td>--deckgo-highlight-code-carbon-header-button-yellow-background</td>
<td>#FFBD2E</td>
<td>The background of the second button of the card header.</td>
</tr>
<tr>
<td>--deckgo-highlight-code-carbon-header-button-yellow-border</td>
<td>0.5px solid #DEA123</td>
<td>The border of the second button of the card header.</td>
</tr>
<tr>
<td>--deckgo-highlight-code-carbon-header-button-green-background</td>
<td>#27C93F</td>
<td>The background of the third button of the card header.</td>
</tr>
<tr>
<td>--deckgo-highlight-code-carbon-header-button-green-border</td>
<td>0.5px solid #1AAB29</td>
<td>The color of the third button of the card header.</td>
</tr>
</tbody></table>
<h3 id="app-components-highlight-code-methods">Methods</h3>
<p>The <code>&lt;deckgo-highlight-code/&gt;</code> expose the following methods:</p>
<h4 id="app-components-highlight-code-find-the-next-anchor">Find the next anchor</h4>
Expand Down
1 change: 1 addition & 0 deletions webcomponents/highlight-code/src/components/highlight-code/readme.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@
| ---------------- | ----------------- | ----------- | --------- | --------------------- |
| `anchor` | `anchor` | | `string` | `'// DeckDeckGo'` |
| `anchorZoom` | `anchor-zoom` | | `string` | `'// DeckDeckGoZoom'` |
| `carbon` | `carbon` | | `boolean` | `true` |
| `editable` | `editable` | | `boolean` | `false` |
| `hideAnchor` | `hide-anchor` | | `boolean` | `true` |
| `highlightLines` | `highlight-lines` | | `string` | `undefined` |
Expand Down

0 comments on commit f0a8567

Please sign in to comment.