52fa307 · urbit.org · git.iko.soy

git.iko.soy/urbit.org

sail guide: fix html codeblock formatting for real this time

commit52fa307a2dd927a84cc2e559c5b7b6ef8e0f9544 authorTinnus Napbus <admin@tinnus-napbus.xyz> dateTue 22 Feb 2022, 05:10 (5 years ago) parent0c4a445

1 file changed+65−42

compare with master

unifiedsplit

content/docs/hoon/guides/sail.md+65−42

content/docs/hoon/guides/sail.md+65−42

@@ -38,12 +38,21 @@ It’s easy to see how Sail can directly translate to HTML:

3838

3939#### HTML code

4040

41−```html

42−<html> <head> <title>My page</title> <meta charset="utf-8" />

43−</head> <body> <h1>Welcome!</h1> <p> Hello, world! Welcome to my

44−page. Here is an image: <br /> <img

45−src="https://media.urbit.org/docs/userspace/dist/wut.svg" /> </p> </body>

46−</html>

41+```

42+<html>

43+ <head>

44+ <title>My page</title>

45+ <meta charset="utf-8" />

46+ </head>

47+ <body>

48+ <h1>Welcome!</h1>

49+ <p>Hello, world! Welcome to my

50+ page. Here is an image:

51+ <br />

52+ <img src="https://media.urbit.org/docs/userspace/dist/wut.svg" />

53+ </p>

54+ </body>

55+</html>

4756```

4857

4958## Tags and Closing

@@ -70,8 +79,8 @@ tag name, then insert your plain text following a space. Example:

7079

7180Produces:

7281

73−```html

74−<h1>The title</h1>

82+```

83+<h1>The title</h1>

7584```

7685

7786### Nested

@@ -91,9 +100,11 @@ Example:

91100

92101Produces:

93102

94−```html

95−<body> <h1>Blog title</h1> <p>This is some good content.</p>

96−</body>

103+```

104+<body>

105+ <h1>Blog title</h1>

106+ <p>This is some good content.</p>

107+</body>

97108```

98109

99110If we want to write a string with no tag at all, then we can prepend

@@ -109,8 +120,11 @@ those untagged lines with `;` and then a space:

109120

110121Produces:

111122

112−```html

113−<body> <h1>Welcome!</h1> Hello, world. We’re on the web. </body>

123+```

124+<body>

125+ <h1>Welcome!</h1>

126+ Hello, world. We’re on the web.

127+</body>

114128```

115129

116130## Attributes

@@ -147,9 +161,11 @@ Tall-form attributes:

147161

148162Produces:

149163

150−```html

151−<div title="a tooltip" style="color:red"> <h1>Foo</h1> <p>foo bar

152−baz </p> </div>

164+```

165+<div title="a tooltip" style="color:red">

166+ <h1>Foo</h1>

167+ <p>foo bar baz </p>

168+</div>

153169```

154170

155171### IDs

@@ -162,8 +178,8 @@ Add `#` after tag name to add an ID:

162178

163179Produces:

164180

165−```html

166−<nav id="header">Menu</nav>

181+```

182+<nav id="header">Menu</nav>

167183```

168184

169185### Classes

@@ -176,8 +192,8 @@ Add `.` after tag name to add a class:

176192

177193Produces:

178194

179−```html

180−<h1 class="text-blue">Title</h1>

195+```

196+<h1 class="text-blue">Title</h1>

181197```

182198

183199If you want a class name that contains a space, you will need to use use the

@@ -189,8 +205,8 @@ syntax of a generic attribute:

189205

190206Produces:

191207

192−```html

193−<div class="logo inverse"></div>

208+```

209+<div class="logo inverse"></div>

194210```

195211

196212### Images

@@ -203,8 +219,8 @@ Add `@` after the tag name to link your source:

203219

204220Produces:

205221

206−```html

207−<img src="example.png"/>

222+```

223+<img src="example.png"/>

208224```

209225

210226To add attributes to the image, like size specifications, add the desired

@@ -225,8 +241,8 @@ Add `/` after tag name to start an `href`.

225241

226242Produces:

227243

228−```html

229−<a href="urbit.org">A link to Urbit.org</a>

244+```

245+<a href="urbit.org">A link to Urbit.org</a>

230246```

231247

232248## Interpolation

@@ -242,8 +258,8 @@ usual manner. For example:

242258

243259Produces:

244260

245−```html

246−<p>foo ~2000.1.1 baz</p>

261+```

262+<p>foo ~2000.1.1 baz</p>

247263```

248264

249265Likewise:

@@ -259,9 +275,11 @@ Likewise:

259275

260276Produces:

261277

262−```html

263−<article> <b>33138</b> bananas <p>~zod ~2022.2.21..09.54.21..5b63

264−0x9827.99c7.06f4.8ef9 </p> </article>

278+```

279+<article>

280+ <b>33138</b> bananas

281+ <p>~zod ~2022.2.21..09.54.21..5b63 0x9827.99c7.06f4.8ef9</p>

282+</article>

265283```

266284

267285## A note on CSS

@@ -391,12 +409,12 @@ tall-form hoon logic in another Sail element. For example:

391409

392410Produces one of these depending on the value of `number`:

393411

394−```html

395−<p><b>2 </b>is an <b>even </b>number.</p>

412+```

413+<p><b>2 </b>is an <b>even </b>number.</p>

396414```

397415

398−```html

399−<p><b>12345 </b>is an <b>odd </b>number.</p>

416+```

417+<p><b>12345 </b>is an <b>odd </b>number.</p>

400418```

401419

402420### `;/` Micfas

@@ -440,10 +458,12 @@ elements inside another Sail element. For example:

440458

441459Produces:

442460

443−```html

444−<p> <sub>1</sub><sup>2</sup><sub>3</sub>

445−<sup>4</sup><sub>5</sub><sup>6</sup>

446−<sub>7</sub><sup>8</sup><sub>9</sub> </p>

461+```

462+<p>

463+ <sub>1</sub><sup>2</sup><sub>3</sub>

464+ <sup>4</sup><sub>5</sub><sup>6</sup>

465+ <sub>7</sub><sup>8</sup><sub>9</sub>

466+</p>

447467```

448468

449469### `;=` Mictis

@@ -466,7 +486,10 @@ For example:

466486

467487Produces:

468488

469−```html

470−<main> <p>This is the first node.</p> <p>This is the second.</p>

471−<p>Here is the last one.</p> </main>

489+```

490+<main>

491+ <p>This is the first node.</p>

492+ <p>This is the second.</p>

493+ <p>Here is the last one.</p>

494+</main>

472495```