Inline Nested Highlighting In WordPress With CSS & HTML5 samp

There are some situations where to write a technical article, we need to draw attention of the reader of the reader. HTML code element, pre are designed to serve specific purposes. Sometime we need to highlight code with more colours than code than our good syntax highlighter plugin like Crayon Syntax Highlighter for WordPress can do. Here is a guide on nested highlighting in WordPress post with CSS and HTML5 samp element. From our examples readers will understand that such usage is really for few articles with extensive need of manual override. Hence we will suggest to load the CSS for the particular post via WordPress post editor Script input option to inject scripts – standard premium theme like StudioPress Genesis have such option to load the CSS for the particular post. Of course there are free WordPress themes and plugins to load the CSS for the particular post. Obviously adding CSS to theme’s style.css always work.

 

Inline Nested Highlighting In WordPress With CSS & HTML5 samp

 

The HTML element tt is absolute in HTML5. The tt element was been in use for marking up computer output. Browsers automatically used browser’s default monotype font. For HTML 5 we can consider the samp element :

If we use samp element, we will get exactly code like font effect without any extra CSS. tt is absolute in HTML5 and will return plain text. Modern web crawlers understand everything. To colorize as nested element, we need a set of CSS like this :

 

The above code is “stolen” from regular-expressions.info website as they need to use hugely odd regex and our readers can see the examples of usage on that website. The above CSS has classes :

1. regexnest1,
2. regexnest2,
3. regexnest3,
4. regexplain,
5. regexspecial,
6. regexccopen,
7. regexccspecial,
8. regexccliteral,
9. regexescaped,
10. regexccrange,
11. regexcomment,
12. regexerr,
13. regexmeta,
14. replaceplain.

The HTML I used above is :

samp is explained above, class="code" is used to use our theme’s existing code block specific CSS and span class="regexnest1" used to pick up the desired CSS.

 

Examples Of Inline Nested Highlighting In WordPress With CSS & HTML5 samp

 

With HTML5 samp element :

(?<=text), (?<=text), \b\w+(?<!s)\b, \b\w*[^s\W]\b, (?<!ab{2,4}c{3,5}d)test

With HTML5 kbd instead of tt element :

(?<=text), (?<=text), \b\w+(?<!s)\b, \b\w*[^s\W]\b, (?<!ab{2,4}c{3,5}d)test

Of course the HTML are not exactly closest to easy :

This is first one :

(?<=text)

This is second one :

(?<=text)

This is third one :

\b\w+(?<!s)\b

This is forth one :

\b\w*[^s\W]\b

This is fifth one :

(?<!ab{2,4}c{3,5}d)test

This is sixth one, notice samp class="match" :

\b\w+(?<!s)\b

 

Advanced Inline Nested Highlighting In WordPress With Automatic Markup Detection

 

For marking the phrase style.css we used backtick in WordPress Editor – a good guide to learn how use PHP snippet to convert special character wrap to wanted HTML block. Instead of back tick, if we use tilde to wrap in this fashion ~style.css~, we can automatically add samp element which can be added to theme’s functions.php or our plugin to add snippets.