Skip to content

Commit 2eeb4d9

Browse files
committed
Add Hacks page
1 parent 8fd16c8 commit 2eeb4d9

4 files changed

Lines changed: 91 additions & 3 deletions

File tree

_basic-syntax/html.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ syntax-id: html
44
api: "no"
55
---
66

7-
Many Markdown applications allow you to use HTML tags in Markdown-formatted text. This is helpful if you prefer certain HTML tags to Markdown syntax. For example, some people find it easier to use HTML tags for images. Using HTML is also helpful when you need to change the attributes of an element, like specifying the color of text or changing the width of an image.
7+
Many Markdown applications allow you to use HTML tags in Markdown-formatted text. This is helpful if you prefer certain HTML tags to Markdown syntax. For example, some people find it easier to use HTML tags for images. Using HTML is also helpful when you need to change the attributes of an element, like specifying the [color of text](/hacks/#color) or changing the width of an image.
88

99
To use HTML, place the tags in the text of your Markdown-formatted file.
1010

@@ -20,6 +20,6 @@ This **word** is bold. This <em>word</em> is italic.
2020

2121
For security reasons, not all Markdown applications support HTML in Markdown documents. When in doubt, check your Markdown application's documentation. Some applications support only a subset of HTML tags.
2222

23-
Use blank lines to separate block-level HTML elementslike `<div>`, `<table>`, `<pre>`, and `<p>` from the surrounding content. Try not to indent the tags with tabs or spaces — that can interfere with the formatting.
23+
Use blank lines to separate block-level HTML elements like `<div>`, `<table>`, `<pre>`, and `<p>` from the surrounding content. Try not to indent the tags with tabs or spaces — that can interfere with the formatting.
2424

2525
You can't use Markdown syntax inside block-level HTML tags. For example, `<p>italic and **bold**</p>` won't work.

_includes/nav.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@
1313
<a class="nav-item nav-link {% if page.title == 'Markdown Cheat Sheet' %}active{% endif %}" href="/cheat-sheet/">Cheat Sheet</a>
1414
<a class="nav-item nav-link {% if page.title == 'Basic Syntax' %}active{% endif %}" href="/basic-syntax/">Basic Syntax</a>
1515
<a class="nav-item nav-link {% if page.title == 'Extended Syntax' %}active{% endif %}" href="/extended-syntax/">Extended Syntax</a>
16+
<a class="nav-item nav-link {% if page.title == 'Hacks' %}active{% endif %}" href="/hacks/">Hacks</a>
1617
<a class="nav-item nav-link {% if page.url contains 'tools' %}active{% endif %}" href="/tools/">Tools</a>
1718
<a class="nav-item nav-link {% if page.title == 'The Markdown Guide Book' %}active{% endif %}" href="/book/">Book</a>
1819
</div>

basic-syntax.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
layout: default
33
title: Basic Syntax
44
description: The Markdown elements outlined in John Gruber's design document.
5-
last_modified_at: 2021-12-08
5+
last_modified_at: 2021-12-19
66
---
77

88
{% include syntax.html type="basic" syntax-id="overview" %}

hacks.md

Lines changed: 87 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,87 @@
1+
---
2+
layout: default
3+
title: Hacks
4+
description: Workarounds for elements not officially supported by Markdown.
5+
last_modified_at: 2021-12-28
6+
---
7+
8+
## Overview
9+
10+
The majority of people using Markdown will find that the [basic](/basic-syntax/) and [extended syntax](/extended-syntax/) elements cover their needs. But chances are that if you use Markdown long enough, you'll inevitably discover that it doesn't support something you need. This page provides some tips and tricks for working around Markdown's limitations.
11+
12+
<div class="alert alert-success">
13+
<i class="fas fa-lightbulb"></i> <strong>Tip:</strong> These hacks aren't guaranteed to work in your Markdown application. If you need to use these elements frequently, you might want to consider writing using something other than Markdown.
14+
</div>
15+
16+
## Underline
17+
18+
Underlined text is not something you typically see in web writing, probably because underlined text is nearly synonymous with links. However, if you're writing a paper or a report, you may need the ability to underline words and phrases. Markdown doesn't natively support underlining text, but if your Markdown processor supports [HTML](/basic-syntax/#html), you can use the `<ins>` HTML tag to underline text in your document.
19+
20+
```html
21+
Some of these words <ins>will be underlined</ins>.
22+
```
23+
24+
The rendered output will look like this:
25+
26+
Some of these words <ins>will be underlined</ins>.
27+
28+
## Indent
29+
30+
Tabs and whitespace have a special meaning in Markdown. You can use trailing whitespace to create [line breaks](/basic-syntax/#line-breaks), and you can use tabs to create [code blocks](/basic-syntax/#code-blocks). But what if you need to indent a paragraph in a paper the old-fashioned way, using the tab key? Markdown doesn't provide an easy way of doing that.
31+
32+
Your best bet might be to use a Markdown editor that supports indentation. This is common in applications that are more oriented towards desktop publishing. For example, [iA Writer](/tools/ia-writer/) allows you to customize indentation settings for the editor in the application preferences. It also provides template customization options so that you can make the rendered document look the way you expect it to, indentation and all.
33+
34+
Another option, if your Markdown processor supports [HTML](/basic-syntax/#html), is to use the HTML entity for non-breaking space (`&nbsp;`). This should probably be your option of last resort as it can get awkward. Basically, every `&nbsp;` in your Markdown source will be replaced with a space in the rendered output. So if you stick four instances of `&nbsp;` before a paragraph, the paragraph will look like it's indented four spaces.
35+
36+
```html
37+
&nbsp;&nbsp;&nbsp;&nbsp;This is the first sentence of my indented paragraph.
38+
```
39+
40+
The rendered output will look like this:
41+
42+
&nbsp;&nbsp;&nbsp;&nbsp;This is the first sentence of my indented paragraph.
43+
44+
## Center
45+
46+
Having the ability to center text is a necessity when writing a paper or a report. Unfortunately, Markdown doesn't have any concept of text alignment (one possible exception is when using [tables](/extended-syntax/#alignment)). The good news is that there's an HTML tag you can use: `<center>`. If your Markdown processor supports [HTML](/basic-syntax/#html), you can place these tags around whatever text you want to center align.
47+
48+
```html
49+
<center>This text is centered.</center>
50+
```
51+
52+
The rendered output looks like this:
53+
54+
<p style="text-align:center">This text is centered.</p>
55+
56+
The `<center>` HTML tag is technically supported but officially <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/center">deprecated</a>, which means it works for now but you're not supposed to be using it. Unfortunately, there's not another pure HTML alternative. You could try using one of the CSS alternatives. Not all Markdown applications provide CSS support, but if the one you're using does, here's an alternative to the `<center>` tag:
57+
58+
```html
59+
<p style="text-align:center">Center this text</p>
60+
```
61+
62+
If this is supported by your Markdown application, the output should look like this:
63+
64+
<p style="text-align:center">Center this text</p>
65+
66+
## Color
67+
68+
Markdown doesn't allow you to change the color of text, but if your Markdown processor supports [HTML](/basic-syntax/#html), you can use the `<font>` HTML tag. The `color` attribute allows you to specify the color using a color's name or the hexadecimal `#RRGGBB` code.
69+
70+
```html
71+
<font color="red">This text is red!</font>
72+
```
73+
74+
The rendered output looks like this:
75+
76+
<p style="color:red">This text is red!</p>
77+
78+
The `<font>` HTML tag is technically supported but officially <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/font">deprecated</a>, which means it works for now but you're not supposed to be using it. Unfortunately, there's not another pure HTML alternative. You could try using one of the CSS alternatives. Not all Markdown applications provide CSS support, but if the one you're using does, here's an alternative to the `<font>` tag:
79+
80+
```html
81+
<p style="color:blue">Make this text blue.</p>
82+
```
83+
84+
If this is supported by your Markdown application, the output should look like this:
85+
86+
<p style="color:blue">Make this text blue.</p>
87+

0 commit comments

Comments
 (0)