This post is used to show how tag plugins are displayed. See docs for more info.

Table of Contents

  1. Alert
  2. Block Quote
  3. Code Block
  4. Gist
  5. Image
  6. jsFiddle
  7. Pull Quote
  8. Highlight text
  9. Tabbed code block
  10. Youtube
  11. Video
  12. Vimeo
  13. Wide image

Alert

Read documentation to know how to use Alert tag

Praesent diam elit, interdum ut pulvinar placerat, imperdiet at magna.

Praesent diam elit, interdum ut pulvinar placerat, imperdiet at magna.

Praesent diam elit, interdum ut pulvinar placerat, imperdiet at magna.

Praesent diam elit, interdum ut pulvinar placerat, imperdiet at magna.

Block Quote

Read documentation to know how to use Block Quote tag

Normal blockquote

Praesent diam elit, interdum ut pulvinar placerat, imperdiet at magna.

Quote from a book

Do not just seek happiness for yourself. Seek happiness for all. Through kindness. Through mercy.

David LevithanWide Awake

Quote from Twitter

NEW: DevDocs now comes with syntax highlighting. http://devdocs.io

Quote from an article on the web

Every interaction is both precious and an opportunity to delight.

Code Block

Read documentation to know how to use Code Block tag

Normal code block

1
2
alert('Hello World!');
alert('Hello World!');

With caption

Array.map
1
array.map(callback[, thisArg])

With caption and URL

apache.confapache.conf
1
2
3
4
5
6
7
8
9
10
11
# rewrite`s rules for wordpress pretty url
LoadModule rewrite_module modules/mod_rewrite.so
RewriteCond %{REQUEST_FILENAME} !-f

<Location /maps/>
RewriteMap map txt:map.txt
RewriteMap lower int:tolower
RewriteCond %{REQUEST_URI} ^/([^/.]+)\.html$ [NC]
RewriteCond ${map:${lower:%1}|NOT_FOUND} !NOT_FOUND
RewriteRule .? /index.php?q=${map:${lower:%1}} [NC,L]
</Location>

Gist

Read documentation to know how to use Gist tag

Image

Read documentation to know how to use Image tag

BMW i8 Concept

jsFiddle

Read documentation to know how to use jsFiddle tag

Pull Quote

Read documentation to know how to use Pull Quote tag

Donec non tempus arcu.
Phasellus adipiscing, mauris nec mollis egestas, ipsum nunc auctor velit, et rhoncus lorem ipsum at ante. Duis vel mauris nulla. Maecenas mattis interdum ante, quis sagittis.

Here is a pullquote left. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas tempus molestie arcu, et
fringilla mauris placerat ac. Nullam luctus bibendum risus. Ut cursus sed ipsum feugiat egestas. Suspendisse elementum, velit eu consequat consequat, augue lorem dapibus libero, eget pulvinar dolor est sit amet nulla. Suspendisse a porta tortor, et posuere mi. Pellentesque ultricies, mi quis volutpat malesuada, erat felis vulputate nisl, ac congue ante tortor ut ante. Proin aliquam sem vel mauris tincidunt, elementum ullamcorper nisl pretium, ultrices cursus justo. Mauris porttitor commodo eros, ac ornare orci interdum in. Cras fermentum cursus leo sed mattis. In dignissim lorem sem, sit amet elementum mauris venenatis ac.

Here is a pullquote right. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Donec non tempus arcu. Phasellus adipiscing, mauris nec mollis egestas, ipsum nunc auctor velit, et rhoncus lorem ipsum at ante. Duis vel mauris nulla.
Maecenas mattis interdum ante, quis sagittis nibh cursus et. Nulla facilisi. Morbi convallis gravida tortor, ut fermentum enim gravida et. Nunc vel dictum nisl, non ultrices libero.
Proin vestibulum felis eget orci consectetur lobortis. Vestibulum augue nulla, iaculis vitae augue vehicula,
dignissim ultrices libero. Sed imperdiet urna et quam ultrices tincidunt nec ac magna. Etiam vel pharetra elit.

Highlight text

Read documentation to know how to use Highlight text tag

highlight red dignissim ultrices libero. Sed imperdiet urna et quam ultrices tincidunt nec ac magna. Etiam vel pharetra elit.highlight green dignissim ultrices libero. Sed imperdiet urna et quam ultrices tincidunt nec ac magna. Etiam vel pharetra elit.highlight blue dignissim ultrices libero. Sed imperdiet urna et quam ultrices tincidunt nec ac magna. Etiam vel pharetra elit.highlight purple dignissim ultrices libero. Sed imperdiet urna et quam ultrices tincidunt nec ac magna. Etiam vel pharetra elit.highlight orange dignissim ultrices libero. Sed imperdiet urna et quam ultrices tincidunt nec ac magna. Etiam vel pharetra elit.highlight yellow dignissim ultrices libero. Sed imperdiet urna et quam ultrices tincidunt nec ac magna. Etiam vel pharetra elit.highlight cyan dignissim ultrices libero. Sed imperdiet urna et quam ultrices tincidunt nec ac magna. Etiam vel pharetra elit.highlight primary dignissim ultrices libero. Sed imperdiet urna et quam ultrices tincidunt nec ac magna. Etiam vel pharetra elit.highlight success dignissim ultrices libero. Sed imperdiet urna et quam ultrices tincidunt nec ac magna. Etiam vel pharetra elit.highlight warning dignissim ultrices libero. Sed imperdiet urna et quam ultrices tincidunt nec ac magna. Etiam vel pharetra elit.highlight danger dignissim ultrices libero. Sed imperdiet urna et quam ultrices tincidunt nec ac magna. Etiam vel pharetra elit.

Tabbed code block

Read documentation to know how to use Tabbed code block

tabbed_codeblock
  • js
  • css
  • html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function $initHighlight(block, flags) {
try {
if (block.className.search(/\bno\-highlight\b/) != -1)
return processBlock(block.function, true, 0x0F) + ' class=""';
} catch (e) {
/* handle exception */
var e4x =
<div>Example
<p>1234</p></div>;
}
for (var i = 0 / 2; i < classes.length; i++) { // "0 / 2" should not be parsed as regexp
if (checkCondition(classes[i]) === undefined)
return /\d+[\s/]/g;
}
console.log(Array.every(classes, Boolean));
}

Youtube

Read documentation to know how to use Youtube tag

Video

Read documentation to know how to use Video tag

Autoplay and Loop video
Video with a poster image

Vimeo

Read documentation to know how to use Vimeo tag

Wide image

Read documentation to know how to use Wide image tag

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio.

Mercedes SLSMercedes SLS

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio.