[[markdown styling->markdown]]
[[formatting with macros->macros]]
[[using web technologies->web]]
(color:green)[(link:"View in debug mode")[(debug:)]]{
<h1>Headline one</h1>
<p>
This is a paragraph
</p>
<h3>Making a link</h3>
<a href = "https://twine2.neocities.org/"
target = "_blank">Harlowe Docmentation</a>
<table border = "1">
<tr>
<td>a</td>
<td>b</td>
</tr>
<tr>
<td>c</td>
<td>d</td>
</tr>
</table>
}
[[web]]
[[start]]==><==
<img src = "emu.jpg"
alt = "magnificent emu"
height = 300
width = 300/>
<!--
Note that the image is stored in the same directory as the file.
It may not be displayed during testing, but if you open the html file
directly, it will show.
-->
Emus are awesome!
[[web]]
[[start]]
(css: "font-size: 2em")[This is huge text]
{
<p class = "blueBG">
This passage has CSS applied to it
</p>
<p class = "pango">
This class uses the pango style
</p>
}
[[CSS Stylesheet->stylesheet]]
[[web]]
[[start]][[colors->colors]]
[[text styles->textStyles]]
[[font->font]][[Headlines->headlines]]
[[text formatting->formatting]]
[[alignment->alignment]]
[[lists->lists]]#Headline 1
##Headline 2
###Headline 3
---
[[markdown]]
[[start]]''bold''
//italic//
~~strikethrough~~
*emphasis*
**strong emphasis**
[[markdown]]
[[start]]{
==>
right justified
<==
left justified
==><==
centered
===><=
3/4
}
=|=
Column 1
=|=
Column 2
=|=
Column 3
|==|
[[markdown]]
[[start]](color: red)[this text is red]
(color: green)[this text is green]
(background: yellow)[this text has a yellow background]
(background: yellow) + (color: black)[black text on a yellow background]
(set: $myStyle to (bg: black) + (color: #ffff00))
$myStyle[yellow on black]
[[start]](text-style:"bold")[bold]
(text-style:"outline")[outline]
(text-style:"shadow")[shadow]
(text-style:"emboss")[emboss]
(text-style:"condense")[condense]
(text-style:"expand")[expand]
(text-style:"blur")[blur]
(text-style:"blurrier")[blurrier]
(text-style:"smear")[smear]
(text-style:"mirror")[mirror]
(text-style:"upside-down")[upside-down]
(text-style:"blink")[blink]
(text-style:"fade-in-out")[fade-in-out]
(text-style:"rumble")[rumble]
(text-style:"shudder")[shudder]
[[macros]]
[[start]]This is the standard font
Generic fonts:
* (font: "serif")[serif]
* (font: "sans-serif")[sans-serif]
* (font: "cursive")[cursive]
* (font: "fantasy")[fantasy]
* (font: "monospace")[monospace]
(font: "Pangolin")[This is a custom font(see CSS)]
<a href = "http://fonts.google.com">Google fonts</a>
[[macros]]
[[start]]* bullet list item A
* bullet list item B
** bullet list item B1
** bullet list item B2
* bullet list item C
0. numbered list A
0. numbered list B
0.0. numbered list B1
0.0. numbered list B2
0. numbered list C
[[markdown]]
[[start]][[Basic HTML->HTML]]
[[Adding an image->image]]
[[CSS->css]]Stylesheet of this story:
<p style = "background-color: #666666">
`@import url('https://fonts.googleapis.com/css2?family=Pangolin&display=swap');
tw-story {
background-color: #330033;
font-family: monospace;
}
tw-link {
color: #ffff00;
}
.visited {
color: #ffff00;
}
.hover {
color: #ff0000;
}
.blueBG{
background-color: blue;
}
.pango{
font-family: pangolin;
}
`
</p>
[[back to CSS->css]]