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

git.iko.soy/urbit.org

on master help sign in

sail guide: fix html codeblock formatting for real this time

52fa307Tinnus Napbus5 years ago

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

compare with master

unifiedsplit

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

39#### HTML code

41−```html

41+```

42+<html>

43+ <head>

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

44+ <title>My page</title>

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

46+ </head>

47+ <body>

48+ <h1>Welcome!</h1>

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

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

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

50+ page. Here is an image:

51+ <br />

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

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

53+ </p>

54+ </body>

46−</html>

55+</html>

47```

56```

49## Tags and Closing

58## Tags and Closing

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

71Produces:

80Produces:

73−```html

82+```

74−<h1>The title</h1>

83+<h1>The title</h1>

75```

84```

77### Nested

86### Nested

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

100

92Produces:

101Produces:

102

94−```html

103+```

104+<body>

105+ <h1>Blog title</h1>

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

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

96−</body>

107+</body>

97```

108```

109

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

110If 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:

109

120

110Produces:

121Produces:

111

122

112−```html

123+```

124+<body>

125+ <h1>Welcome!</h1>

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

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

127+</body>

114```

128```

115

129

116## Attributes

130## Attributes

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

147

161

148Produces:

162Produces:

149

163

150−```html

164+```

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

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

166+ <h1>Foo</h1>

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

152−baz </p> </div>

168+</div>

153```

169```

154

170

155### IDs

171### IDs

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

162

178

163Produces:

179Produces:

164

180

165−```html

181+```

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

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

167```

183```

168

184

169### Classes

185### Classes

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

176

192

177Produces:

193Produces:

178

194

179−```html

195+```

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

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

181```

197```

182

198

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

199If 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:

189

205

190Produces:

206Produces:

191

207

192−```html

208+```

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

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

194```

210```

195

211

196### Images

212### Images

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

203

219

204Produces:

220Produces:

205

221

206−```html

222+```

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

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

208```

224```

209

225

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

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

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

225

241

226Produces:

242Produces:

227

243

228−```html

244+```

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

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

230```

246```

231

247

232## Interpolation

248## Interpolation

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

242

258

243Produces:

259Produces:

244

260

245−```html

261+```

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

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

247```

263```

248

264

249Likewise:

265Likewise:

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

259

275

260Produces:

276Produces:

261

277

262−```html

278+```

279+<article>

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

280+ <b>33138</b> bananas

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

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

282+</article>

265```

283```

266

284

267## A note on CSS

285## A note on CSS

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

391

409

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

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

393

411

394−```html

412+```

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

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

396```

414```

397

415

398−```html

416+```

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

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

400```

418```

401

419

402### `;/` Micfas

420### `;/` Micfas

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

440

458

441Produces:

459Produces:

442

460

443−```html

461+```

462+<p>

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

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

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

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

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

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

466+</p>

447```

467```

448

468

449### `;=` Mictis

469### `;=` Mictis

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

466

486

467Produces:

487Produces:

468

488

469−```html

489+```

490+<main>

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

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

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

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

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

494+</main>

472```

495```