PubWriter Sandbox Tutorial - More Tips & Tricks

<div class="sandbox">

# Even **MORE** ways to use PubWriter!

## Embed HTML

## Superscript

10<sup>2</sup>

## Subscript

H<sub>2</sub>O

## Telephone Number (Click to call)

<a href="tel:+1805111111">Phone: (805) 711-1111</a>

## Email address

<name@email.com>

## Hidden comments

You can add 'hidden text' on a page (i.e. comments) that you can only see in your source file, but they won't show up on your website! This is great for notes to yourself.

This is not a hidden comment!

## Block quotes

> This is a block quote (you just insert a `>` in front of the text).

## Plain text

When you start a line with 4 blank spaces, it will show up as plain text, link this!

## Highlight Text

Use the `<mark>` tag to <mark>highlight</mark> text.

You can specify the highlight color in css:

```
mark {
 background-color: limegreen;
}
```

## Strikethrough

If you want to <s>strikethrough</s> a word, just use the `<s>` tag.

## KBD style

Example:
Spell check: <kbd>⌘</kbd> + <kbd>Shift</kbd> + <kbd>;</kbd>

> see more examples [here](https://read.pubwriter.com/shortcuts).

## Horizontal lines (aka breaks)

If you type `***` it will draw a horizontal line across the screen:

***

We can customize the break for your PubWriter site using a custom style:

## Folding Text

<summary>This is a collapsible section</summary>

We sometimes refer to this as folding text.

</details>

# Marquee

Want to draw attention to 'news flash'? Use a marquee!

<marquee onmouseover="this.stop();" onmouseout="this.start();"><mark><span class="iconify" data-icon="ic:round-new-releases" data-inline="false"></span> Next **LIVE** workshop begins 10/6/20 (via Zoom), [click here](https://www.cuesta.edu/communityprograms/community-education/music/ukulele_101.html) to learn more!</mark></marquee>

Let's break down this down:

The first part `<marquee onmouseover="this.stop();" onmouseout="this.start();">` is used to pause the scroll of the marquee on hover. If you don't want to enable pause on mouse hover, just use `<marquee>`.

Next, I am using the `<mark>` which is a html tag used to highlight text. If you don't want it highlighted, remove the `<mark> and </mark>`.

Next, I am using an Iconify icon. Iconify requires that a little JS is preloaded, so be sure that's in place. Learn more [here](https://pubwriter.net/iconify).

You can a lot more... try adding images and headings:

<marquee>![](https://pubwriter.net/images/stareyed.png)</marquee>

and headings

# <marquee>This is a heading 1</marquee>

## Changing the direction and speed

<marquee behavior="scroll" scrollamount="15" direction="right" onmouseover="this.stop();" onmouseout="this.start();">Wow! You can control the direction & speed of scroll!</marquee>