Hugo W3 Simple Theme Shortcodes Demo

2018-11-24 859 words 5 mins read

I made the Hugo W3-Simple Theme based on W3.css from W3schools because I think W3.css is very powerful and fast CSS Framework. (It is much smaller than Bootstrap css)

I just went to Miniwebtool Character Counter to compare both css. W3.css is just less than 20% of Bootstrap.min.css file size.

I am not very familiar with Bootstrap.min.css. But I think W3.css is more than enough to build a blog-style website.

So I made this project and will keep updating.

Just finished some shortcodes functions.

This article is about the demo of these shortcodes.


Info Shortcodes

We can easily display info with this code below on markdown file

Code for info shortcodes

{{< info >}}
Blue often indicates a neutral informative change or action.
{{</info >}}

It will display default title with Information!:

Information!

Blue often indicates a neutral informative change or action.

You can set title with the following code:

Code for info shortcodes with title

{{< info title="W3.CSS is a CSS Framework!">}}
W3.CSS is a modern CSS framework with built-in responsiveness. It supports responsive mobile first design by default, and it is smaller and faster than similar CSS frameworks.
{{< /info >}}

It will display the title with your set:

W3.CSS is a CSS Framework!

W3.CSS is a modern CSS framework with built-in responsiveness. It supports responsive mobile first design by default, and it is smaller and faster than similar CSS frameworks.


Warning Shortcodes

We can easily display warning with this code below on markdown file

Code for warning shortcodes

{{< warning >}}
Yellow often indicates a warning that might need attention.
{{</warning >}}

It will display default title with Warning!:

Warning!

Yellow often indicates a warning that might need attention.

You can set title with the following code:

Code for warning shortcodes with title

{{< warning title="Do Not Bypass This Theme!">}}
W3-simple is a Hugo theme powered by W3.css!
{{< /warning >}}

It will display the title with your set:

Do Not Bypass This Theme!

W3-simple is a Hugo theme powered by W3.css!


Colorcode shortcodes

W3-simple theme use w3colorcode.js to display code colors.

To use this function, you should add w3codecolor: true to your post.

Although w3colorcode.js is much smaller than other js, but it is still more than 20kb. So I do not want every page include this js file if no need.

w3colorcode.js is also built by W3school

It supports html, js, java, css, sql, python at this moment.

I just changed a little to add support to bash script.

bash Highlight

Colorcode shortcodes use mode and title to set up parameters. if not set, default color mode is bash and no title.

Code for default colorcode shortcodes

{{< colorcode >}}
your code here
{{</colorcode >}}

The demo for default colorcode shortcodes:
To install w3-simple theme, just use the command below
cd themes
git clone https://github.com/jesselau76/hugo-w3-simple.git

html Highlight

Code for html colorcode shortcodes

{{< colorcode mode="htmlHigh" title="Demo for html color" >}}
your code here
{{</colorcode >}}

Demo for html color

<!DOCTYPE html>
<html>
<title>HTML Tutorial</title>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

css Highlight

Code for css colorcode shortcodes

{{< colorcode mode="cssHigh" title="Demo for css color" >}}
your code here
{{</colorcode >}}

Demo for css color

body {
background-color: #d0e4fe;
}

h1 {
color: orange;
text-align: center;
}

p {
font-family: "Times New Roman";
font-size: 20px;
}

javascript Highlight

Code for js colorcode shortcodes

{{< colorcode mode="jsHigh" title="Demo for js color" >}}
your code here
{{</colorcode >}}

Demo for js color

function w3CodeColor() {
var x, i, j, k, l, modes = ["html", "js", "java", "css", "sql", "python"];
if (!document.getElementsByClassName) {return;}
k = modes.length;
for (j = 0; j < k; j++) {
x = document.getElementsByClassName(modes[j] + "High");
l = x.length;
for (i = 0; i < l; i++) {
x[i].innerHTML = w3CodeColorize(x[i].innerHTML, modes[j]);
}
}
}

sql Highlight

Code for sql colorcode shortcodes

{{< colorcode mode="sqlHigh" title="Demo for sql color" >}}
your code here
{{</colorcode >}}

Demo for sql color

SELECT column1, column2, ...
FROM table_name
ORDER BY column1, column2, ... ASC|DESC;

python Highlight

Code for python colorcode shortcodes

{{< colorcode mode="pythonHigh" title="Demo for python color" >}}
your code here
{{</colorcode >}}

Demo for python color

import json
# some JSON:
x = '{ "name":"John", "age":30, "city":"New York"}'
# parse x:
y = json.loads(x)
# the result is a Python dictionary:
print(y["age"])

quote shortcode

We can display quotes with shortcodes

Code for quote shortcodes

{{< quote >}}
Make it as simple as possible, but not simpler.
{{< /quote >}}

It will display quote with default width 100% style and no author:

Make it as simple as possible, but not simpler.

You can also set width and author with shortcodes:

Code for quote shortcodes with % width

{{< quote width="61.8%" author="Albert Einstein" >}}
Make it as simple as possible, but not simpler.
{{< /quote >}}


Make it as simple as possible, but not simpler.

--- Albert Einstein

Or you can set px to width

Code for quote shortcodes with px width

{{< quote width="300px" author="Albert Einstein" >}}
Make it as simple as possible, but not simpler.
{{< /quote >}}

Make it as simple as possible, but not simpler.

--- Albert Einstein


Tags: hugo

author

Authored By Jesse Lau

A freelancer living in New Zealand, engaged in website development and program trading. Ever won 1st ranking twice in the Dukascopy Strategy Contest. This article is licensed under a Creative Commons Attribution 4.0 International License.

We notice you're using an adblocker. If you like our webite please keep us running by whitelisting this site in your ad blocker. We’re serving quality, related ads only. Thank you!

I've whitelisted your website.

Not now

Post Your Comments Here:

Our website uses cookies to improve your user experience. If you continue browsing, we assume that you consent to our use of cookies. More information can be found in our privacy policy Got it