For Authors

[IMPORTANT] Houskeeping

Welcome to RHHS's new student council / club site hub. This website will allow club presidents to create their own club website under this main website.

This is the beginning of the tutorial that will guide club presidents as to how to make effective and appropriate use of the website

To begin, here are some housekeeping rules that you must obey if you decide to use this site:

  1. This is being an open platform for all clubs in Richmond Hill High School, please be very respectful of the content that you may publish. Please keep them appropriate and use common sense.
  2. In order to allow people know that your post is related to your club, please use the tagging feature. Tagging abuse is strictly prohibited. (For instance, if you are the president of club A, you must not tag your post so that it appears to be club B) The consequence is very serious so please stick to the assigned tag for your club.
  3. Richmond Hill High School Student Council reserves the right to freely (anytime and for any reason) modify, create, delete, share (including the office) any content that you may post on this website.
  4. Richmond Hill High School Student Council reserves the right to update this terms and conditions at any given time and for any given reason. It is your job to check back for updates.
  5. Should you disagree with any of the first four terms, your privilege of using this website will be revoked immediately. (This includes your login credentials as well as any content under your account)

[IMPORTANT] Tagging

This is a very important tutorial as to how you can effectively use this website appropriately. Please do not skip a word in this short tutorial.

To start, lets first assume you already got your website up and running. What will the URL be? For example, if you club is computer science club your URL will be rhhsstuco.org/tag/computer-science. As you can probably already guessed, posts from different clubs are organized strictly by the tags that a post contains.

So how do you add a tag to your post?
It is very easy in fact. All you need to do is to click the little setting icon at the top right corner of your post text editor. Then, in the tag section type in the name of your club. For example, "computer science" or "physics" or "reach for the top".

The editor

We use a language called Markdown to format text.

When you go to edit a post and see special characters and colours intertwined between the words, those are Markdown shortcuts which tell the site what to do with the words in your document. The biggest benefit of Markdown is that you can quickly apply formatting as you type, without needing to pause.

At the bottom of the editor, you'll find a toolbar with basic formatting options to help you get started as easily as possible. You'll also notice that there's a ? icon, which contains more advanced shortcuts.

For now, though, let's run you through some of the basics. You'll want to make sure you're editing this post in order to see all the Markdown we've used.

Formatting text

The most common shortcuts are of course, bold text, italic text, and hyperlinks. These generally make up the bulk of any document. You can type the characters out, but you can also use keyboard shortcuts.

  • CMD/Ctrl + B for Bold
  • CMD/Ctrl + I for Italic
  • CMD/Ctrl + K for a Link
  • CMD/Ctrl + H for a Heading (Press multiple times for h2/h3/h4/etc)

With just a couple of extra characters here and there, you're well on your way to creating a beautifully formatted story.

Inserting images

Images in Markdown look just the same as links, except they're prefixed with an exclamation mark, like this:

![Image description](/path/to/image.jpg)

rhhsstuco

Most Markdown editors don't make you type this out, though. In the admin dashboard you can click on the image icon in the toolbar at the bottom of the editor, or you can just click and drag an image from your desktop directly into the editor. Both will upload the image for you and generate the appropriate Markdown.

Making lists

Lists in HTML are a formatting nightmare, but in Markdown they become an absolute breeze with just a couple of characters and a bit of smart automation. For numbered lists, just write out the numbers. For bullet lists, just use * or - or +. Like this:

  1. Crack the eggs over a bowl
  2. Whisk them together
  3. Make an omelette

or

  • Remember to buy milk
  • Feed the cat
  • Come up with idea for next story

Adding quotes

When you want to pull out a particularly good excerpt in the middle of a piece, you can use > at the beginning of a paragraph to turn it into a Blockquote. You might've seen this formatting before in email clients.

A well placed quote guides a reader through a story, helping them to understand the most important points being made

All themes handles blockquotes slightly differently. Sometimes they'll look better kept shorter, while other times you can quote fairly hefty amounts of text and get away with it. Generally, the safest option is to use blockquotes sparingly.

Dividing things up

If you're writing a piece in parts and you just feel like you need to divide a couple of sections distinctly from each other, a horizontal rule might be just what you need. Dropping --- on a new line will create a sleek divider, anywhere you want it.


Special formatting

As well as bold and italics, you can also use some other special formatting in Markdown when the need arises, for example:

  • strike through
  • highlight
  • *escaped characters*

Writing code blocks

There are two types of code elements which can be inserted in Markdown, the first is inline, and the other is block. Inline code is formatted by wrapping any word or words in back-ticks, like this. Larger snippets of code can be displayed across multiple lines using triple back ticks:

.my-link {
    text-decoration: underline;
}

If you want to get really fancy, you can even add syntax highlighting using Prism.js.

Full bleed images

One neat trick which you can use in Markdown to distinguish between different types of images is to add a #hash value to the end of the source URL, and then target images containing the hash with special styling. For example:

rhhsstuco

which is styled with...

img[src$="#full"] {
    max-width: 100vw;
}

This creates full-bleed images in the Casper theme, which stretch beyond their usual boundaries right up to the edge of the window. Every theme handles these types of things slightly differently, but it's a great trick to play with if you want to have a variety of image sizes and styles.

Reference lists

The quick brown fox, jumped over the lazy dog.

Another way to insert links in markdown is using reference lists. You might want to use this style of linking to cite reference material in a Wikipedia-style. All of the links are listed at the end of the document, so you can maintain full separation between content and its source or reference.

Creating footnotes

The quick brown fox[1] jumped over the lazy dog[2].

Footnotes are a great way to add additional contextual details when appropriate. The website will automatically add footnote content to the very end of your post.

Full HTML

Perhaps the best part of Markdown is that you're never limited to just Markdown. You can write HTML directly in the admin editor and it will just work as HTML usually does. No limits! Here's a standard YouTube embed code as an example:

That is it. Assume that you have finished reading the comprehensive guide as to how to use the edior, you will now be able to use the website to its full potential. If you have more questions please email [email protected] or [email protected].


  1. Foxes are red ↩︎

  2. Dogs are usually not red ↩︎