Do you know all the cool stuff you can do on SSW Rules?
Last updated by Tiago Araújo [SSW] 2 months ago.See historyThis is an example rule + markdown cheatsheet to show you the things you can use to format an SSW rule.
1. Headings, paragraphs, and blockquotes
# This is a heading 1
Lorem ipsum dolor sit amet. Ut enim ad minim veniam, quis nostrud exercitation. qui officia deserunt mollit anim id est laboru.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborumsunt in culpa qui officia.
## This is a heading 2
### This is a heading 3
#### This is a heading 4
##### This is a heading 5
###### This is a heading 6 and below is a blockquote
> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
> - Someone famous in Source Title
Figure: Markdown to generate headings and blockquotes
This is a heading 1
Lorem ipsum dolor sit amet. Ut enim ad minim veniam, quis nostrud exercitation. qui officia deserunt mollit anim id est laboru.
This is a heading 2
Lorem ipsum dolor sit amet. Ut enim ad minim veniam, quis nostrud exercitation. qui officia deserunt mollit anim id est laboru.
This is a heading 3
Lorem ipsum dolor sit amet. Ut enim ad minim veniam, quis nostrud exercitation. qui officia deserunt mollit anim id est laboru.
This is a heading 4
Lorem ipsum dolor sit amet. Ut enim ad minim veniam, quis nostrud exercitation. qui officia deserunt mollit anim id est laboru.
This is a heading 5
Lorem ipsum dolor sit amet. Ut enim ad minim veniam, quis nostrud exercitation. qui officia deserunt mollit anim id est laboru.
This is a heading 6
Lorem ipsum dolor sit amet. Ut enim ad minim veniam, quis nostrud exercitation. qui officia deserunt mollit anim id est laboru.
...and this is a blockquote:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
- Someone famous in Source Title
2. Text decorations
*This text will be italic*
_This will also be italic_
**This text will be bold**
__This will also be bold__
_You **can** combine them_
~~strikethrough~~
<mark>These words</mark> are surrounded by a <mark> (HTML needed)
Figure: Markdown to generate different text styles
This text will be italic
This will also be italic
This text will be bold
This will also be bold
strikethrough
*You can combine them*
These words are surrounded by a <mark> (HTML needed)
3. Lists
#### Unordered lists
* This is the first item of an unordered list
* This is the second item of an unordered list
1. This is the first item of an ordered list inside an unordered list
2. This is the second item of an ordered list inside an unordered list
* This is the third item of an unordered list
* This is the first item of an unordered list inside another
* This is the second item of an unordered list inside another
1. This is the first item of an ordered list inside a nested unordered list
2. This is the second item of an ordered list inside a nested unordered list
#### Ordered lists
1. This is the first item of an ordered list
2. This is the second item of an ordered list
3. This is the third item of an ordered list
* This is the first item of an unordered list inside an ordered list
* This is the second item of an unordered list inside an ordered list
1. This is the first item of an ordered list inside another
2. This is the second item of an ordered list inside another
Figure: Markdown to generate lists
Unordered lists
- This is the first item of an unordered list
-
This is the second item of an unordered list
- This is the first item of an ordered list inside an unordered list
- This is the second item of an ordered list inside an unordered list
-
This is the third item of an unordered list
- This is the first item of an unordered list inside another
-
This is the second item of an unordered list inside another
- This is the first item of an ordered list inside a nested unordered list
- This is the second item of an ordered list inside a nested unordered list
Ordered lists
- This is the first item of an ordered list
- This is the second item of an ordered list
-
This is the third item of an ordered list
- This is the first item of an unordered list inside an ordered list
-
This is the second item of an unordered list inside an ordered list
- This is the first item of an ordered list inside another
- This is the second item of an ordered list inside another
4. Links
[link text](https://www.url.com "link title")
Figure: Markdown to generate links
This is an internal link.
This is an internal link with title (hover me).
This is an external link.
Cool features:
- Our main headings auto-generated anchor links so users can easily access a section of a long page like this one. E.g. https://ssw.com.au/rules/rule/#4-links
- We use icons on files' links to not to surprise users
5. Boxes
::: greybox
This is a box using the class "greybox".
:::
Figure: Markdown to generate boxes
This is a box using the class "greybox".
This is a box using the class "highlight".
This is a <div> using the class "info". Works the same as using a <p> . Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.
This is a <div> using the class "china". Works the same as using a <p> . Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
This is a <div> using the class "codeauditor". Works the same as using a <p> . Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
This is a <div> using the class "todo". Works the same as using a <p> . Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.
Hiding content
Use the class "hidden" to hide content.
::: hidden
bfb265e3-644e-4cbe-b17c-4d378b014809-7947936
:::
Figure: Nothing will show up from this Markdown
6. Images
::: img-small
![Figure: Caption text](image-file.jpg)
:::
TODO: Make these images hosted internally as per Do you make sure your images are hosted internally?
7. Captions
::: bad
Figure: Caption for bad examples
:::
::: ok
Figure: Caption for OK examples
:::
::: good
Figure: Caption for good examples
:::
Captions on images
Captions on boxes
This is an example of a bad grey box.
Figure: Caption for bad examples
This is an example of a normal grey box.
Figure: Caption for normal examples
This is an example of a OK grey box.
Figure: Caption for ok examples
This is an example of a good grey box.
Figure: Caption for good examples
8. Videos
Code for videos
`youtube: https://www.youtube.com/embed/0ugMkda9IBw`
**Video: Top 5 Reasons Why ASP.NET MVC is Great (3 min)**
Figure: Markdown to add videos and video captions
Example
Check out this video - it's responsive!
Video: Top 5 Reasons Why ASP.NET MVC is Great (3 min)9. Twitter Cards Embed
Embedding a Tweet is similar to a video. Copy the link of the tweet then add it to the rule with backticks on each side like this:
`oembed: https://twitter.com/MrHinsh/status/24123713864`
Do you understand a data type change = "Data Motion Scripts"? http://bit.ly/9OMKTO #ssw #sswrules
— Martin Hinshelwood 🏴 🇪🇺 🇲🇽 (@MrHinsh) September 10, 2010
10. Email Templates
Code for email template
::: email-template
| | |
| -------- | --- |
| To: | XXX |
| Cc: | YYY |
| Bcc: | ZZZ |
| Subject: | {{Email subject}} |
::: email-content
### Hi XXX,
{{Email content}}
:::
:::
::: good
Figure: Good example - Nice email template
:::
Figure: Markdown for email templates
Figure: Good example - Nice email template
11. Code
This is a piece of code in a code block
Figure: Bad example - Because this code doesn't include the language used
Learn more on Markdown – Do you set the language on code blocks?
See this json file for all supported languages and their aliases we can use in Rules. See below for some examples:
let iceCream = 'chocolate';
if(iceCream === 'chocolate') {
alert('Yay, I love chocolate ice cream!');
} else {
alert('Awwww, but chocolate is my favorite...');
}
Figure: Javascript code block
IF EXISTS (SELECT 1 FROM
INFORMATION_SCHEMA.TABLES
WHERE
TABLE_TYPE='BASE TABLE' AND
TABLE_NAME='Employees'
)
ALTER TABLE [dbo].[Employees]( …… ) ON [PRIMARY]
ELSE
CREATE TABLE [dbo].[Employees]( …… ) ON [PRIMARY]
Figure: SQL code block
public class MyClass
{
public string myField = string.Empty;
public MyClass()
{
}
public void MyMethod(int parameter1, string parameter2)
{
Console.WriteLine("First Parameter {0}, second parameter {1}",
parameter1, parameter2);
}
public int MyAutoImplementedProperty { get; set; }
private int myPropertyVar;
public int MyProperty
{
get { return myPropertyVar; }
set { myPropertyVar = value; }
}
}
Figure: C Sharp code block
#include <iostream>
using namespace std;
int main()
{
cout << "Size of char: " << sizeof(char) << " byte" << endl;
cout << "Size of int: " << sizeof(int) << " bytes" << endl;
cout << "Size of float: " << sizeof(float) << " bytes" << endl;
cout << "Size of double: " << sizeof(double) << " bytes" << endl;
return 0;
}
Figure: C++ code block
{
"glossary": {
"title": "example glossary",
"GlossDiv": {
"title": "S",
"GlossList": {
"GlossEntry": {
"ID": "SGML",
"SortAs": "SGML",
"GlossTerm": "Standard Generalized Markup Language",
"Acronym": "SGML",
"Abbrev": "ISO 8879:1986",
"GlossDef": {
"para": "A meta-markup language, used to create markup languages such as DocBook.",
"GlossSeeAlso": ["GML", "XML"]
},
"GlossSee": "markup"
}
}
}
}
}
Figure: JSON code block
12. Tables
Code for tables
| Tables | Are | Cool |
| ------------- | :-----------: | -----: |
| col 3 is | right-aligned | \$1600 |
| col 2 is | centered | \$12 |
| zebra stripes | are neat | \$1 |
Figure: Markdown to generate tables
Examples
Tables | Are | Cool |
---|---|---|
col 3 is | right-aligned | $1600 |
col 2 is | centered | $12 |
zebra stripes | are neat | $1 |
Markdown | Less | Pretty |
---|---|---|
Still | renders |
nicely |
1 | 2 | 3 |
13. Thematic breaks (horizontal rules)
Code for hr
---
***
___