Added syntax highlighting to sample code blocks (#25905)

Fenced sample code blocks didn't have syntax highlighting so updated the guide by adding the HTML language identifier to enable syntax highlighting in the fenced code blocks.
pull/25573/head^2
Rufaro Madamombe 2018-12-06 22:34:13 +02:00 committed by Tom
parent 4bba3f779f
commit 8e2526887b
1 changed files with 9 additions and 9 deletions

View File

@ -14,13 +14,13 @@ Semantic UI class is simply added to a button element, various example were give
* Standard Button
Standard Semantic UI button
```
```html
<button class="ui button">Standard Button</button>
```
* Emphasis Button
A button with a different level of emphasis
```
```html
<button class="ui primary button">
```
Other emphasis classes are `secondary`, `positive`, and `negative`
@ -28,7 +28,7 @@ Other emphasis classes are `secondary`, `positive`, and `negative`
* Animated Button
A button with animation, showing hidden contents
```
```html
<div class="ui animated fade button" tabindex="0">
<div class="visible content">Sign-up for a Pro account</div>
<div class="hidden content">$12.99 a month</div>
@ -39,7 +39,7 @@ The property `tabindex="0"` above makes the button keyboard focusable, since the
* Labeled Button
A button alongside a label
```
```html
<div class="ui labeled button" tabindex="0">
<div class="ui button"><i class="heart icon"></i> Like</div>
<a class="ui basic label">2,048</a>
@ -50,7 +50,7 @@ the element `<i>` is used to specify an icon, here it is a heart icon `<i class=
* Icon Button
A Semantic UI button can be just an icon
```
```html
<button class="ui icon button">
<i class="camera icon"></i>
</button>
@ -60,7 +60,7 @@ The above is just a camera icon
#### Groups
Semantic UI buttons can exist in a group
```
```html
<div class="ui buttons">
<button class="ui button">One</button>
<button class="ui button">Two</button>
@ -71,7 +71,7 @@ Semantic UI buttons can exist in a group
#### Content
Semantic UI buttons can contain conditionals
```
```html
<div class="ui buttons">
<button class="ui positive button">Yes</button>
<div class="or" data-text="or"></div>
@ -82,14 +82,14 @@ Semantic UI buttons can contain conditionals
#### States
Semantic UI buttons can exist in different states, `active`, `disabled`, `loading`. Simply add a state name to the `class` attribute` of `<button>` element.
```
```html
<button class="ui loading button">Loading</button>
```
#### Variations
Semantic UI buttons exist in variety of sizes, `mini`, `tiny`, `small`, `medium`, `large`, `big`, `huge`, and `massive`.
```
```html
<button class="ui massive button">Massive Button</button>
```