Skip to content

Commit e9f28db

Browse files
author
Ryan A. Johnson
committed
fix(Code): correct layout of Code docs
1 parent 5d81c90 commit e9f28db

File tree

2 files changed

+179
-160
lines changed

2 files changed

+179
-160
lines changed

‎source/_less/scaffold.less‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,3 +2,8 @@
22
html {
33
font-family: "Roboto", sans-serif;
44
}
5+
6+
figure {
7+
// TODO: update this once spacing system is defined
8+
margin-bottom: 1rem;
9+
}

‎source/components/code/index.html‎

Lines changed: 174 additions & 160 deletions
Original file line numberDiff line numberDiff line change
@@ -64,182 +64,196 @@ <h2 class="hxSectionTitle" id="syntax-highlighting">Syntax Highlighting</h2>
6464
Below are some examples of the syntax highlighting in action.
6565
</p>
6666

67-
<h3>HTML</h3>
68-
{% code 'html' %}
69-
<script type="text/javascript" src="path/to/script.js"></script>
70-
<link rel="stylesheet" href="path/to/style.css" />
71-
<!-- HTML Comment -->
72-
<form method="POST" action="submit.html">
73-
<fieldset>
74-
<legend>Login</legend>
67+
<figure>
68+
<figcaption>HTML Syntax Highlighting Example</figcaption>
69+
{% code 'html' %}
70+
<script type="text/javascript" src="path/to/script.js"></script>
71+
<link rel="stylesheet" href="path/to/style.css" />
72+
<!-- HTML Comment -->
73+
<form method="POST" action="submit.html">
74+
<fieldset>
75+
<legend>Login</legend>
76+
<p>
77+
<label for="username">Username</label>
78+
<input type="text" id="username" name="username" />
79+
</p>
80+
<p>
81+
<label for="password">Password</label>
82+
<input type="password" id="password" name="password" />
83+
</p>
84+
</fieldset>
7585
<p>
76-
<label for="username">Username</label>
77-
<input type="text" id="username" name="username" />
86+
<button type="submit">Log In</button>
7887
</p>
7988
<p>
80-
<label for="password">Password</label>
81-
<input type="password" id="password" name="password" />
89+
<img src="path/to/file.png" alt="pretty picture" />
8290
</p>
83-
</fieldset>
84-
<p>
85-
<button type="submit">Log In</button>
86-
</p>
87-
<p>
88-
<img src="path/to/file.png" alt="pretty picture" />
89-
</p>
90-
</form>
91-
{% endcode %}
92-
93-
<h3>JavaScript</h3>
94-
{% code 'javascript' %}
95-
/**
96-
* @description Multi-line comment
97-
* @returns {String}
98-
*/
99-
// Inline Comment
100-
var legacyVariable;
101-
const REGEXP = /h(iy|ell)o*/ig;
102-
const array = [ null, true, false ];
103-
const obj = {
104-
number: 42,
105-
integer: 42.0,
106-
s_string: 'single quotes',
107-
d_string: "double quotes"
108-
};
109-
function greet (name: 'World') {
110-
if (foo !== 'bar') {
111-
return 'nope';
112-
} else if (foo || bar) {
113-
return 'maybe';
114-
} else if (foo && bar) {
115-
return 'wut';
91+
</form>
92+
{% endcode %}
93+
</figure>
94+
95+
<figure>
96+
<figcaption>JavaScript Syntax Highlighting Example</figcaption>
97+
{% code 'javascript' %}
98+
/**
99+
* @description Multi-line comment
100+
* @returns {String}
101+
*/
102+
// Inline Comment
103+
var legacyVariable;
104+
const REGEXP = /h(iy|ell)o*/ig;
105+
const array = [ null, true, false ];
106+
const obj = {
107+
number: 42,
108+
integer: 42.0,
109+
s_string: 'single quotes',
110+
d_string: "double quotes"
111+
};
112+
function greet (name: 'World') {
113+
if (foo !== 'bar') {
114+
return 'nope';
115+
} else if (foo || bar) {
116+
return 'maybe';
117+
} else if (foo && bar) {
118+
return 'wut';
119+
}
120+
return `Hello ${name}!`;
116121
}
117-
return `Hello ${name}!`;
118-
}
119-
{% endcode %}
120-
121-
<h3>CSS</h3>
122-
{% code 'css' %}
123-
/* CSS Comment */
124-
@import url('https://fonts.googleapis.com/css?family=Roboto+Mono:100,100i,300,300i,400,400i,700,700i');
125-
:root {
126-
--border-color: #bada55;
127-
}
128-
html {
129-
box-sizing: border-box;
130-
}
131-
*,
132-
*::before,
133-
*::after {
134-
box-sizing: inherit;
135-
}
136-
#navigation {
137-
border: 1px solid var(--border-color);
138-
padding: 1em;
139-
margin: 0;
140-
background-image: linear-gradient(90deg, rgba(0, 0, 0, 0,5), white);
141-
}
142-
input[type="checkbox"]:checked {
143-
/* ... */
144-
}
145-
.text-center {
146-
text-align: center !important;
147-
}
148-
{% endcode %}
149-
150-
<h3>Diff</h3>
151-
{% code 'diff' %}
152-
Index: languages/ini.js
153-
===================================================================
154-
--- languages/ini.js (revision 199)
155-
+++ languages/ini.js (revision 200)
156-
@@ -1,8 +1,7 @@
157-
hljs.LANGUAGES.ini =
158-
{
159-
case_insensitive: true,
160-
- defaultMode:
161-
- {
162-
+ defaultMode: {
163-
contains: ['comment', 'title', 'setting'],
164-
illegal: '[^\\s]'
165-
},
166-
167-
*** /path/to/original timestamp
168-
--- /path/to/new timestamp
169-
***************
170-
*** 1,3 ****
171-
--- 1,9 ----
172-
+ This is an important
173-
+ notice! It should
174-
+ therefore be located at
175-
+ the beginning of this
176-
+ document!
177-
178-
! compress the size of the
179-
! changes.
180-
181-
It is important to spell
182-
{% endcode %}
183-
184-
<h3>bash</h3>
185-
{% code 'bash' %}
186-
#!/bin/bash
187-
188-
###### CONFIG
189-
ACCEPTED_HOSTS="/root/.hag_accepted.conf"
190-
BE_VERBOSE=false
191-
192-
if [ "$UID" -ne 0 ]
193-
then
194-
echo "Superuser rights required"
195-
exit 2
196-
fi
122+
{% endcode %}
123+
</figure>
124+
125+
<figure>
126+
<figcaption>CSS Syntax Highlighting Example</figcaption>
127+
{% code 'css' %}
128+
/* CSS Comment */
129+
@import url('https://fonts.googleapis.com/css?family=Roboto+Mono:100,100i,300,300i,400,400i,700,700i');
130+
:root {
131+
--border-color: #bada55;
132+
}
133+
html {
134+
box-sizing: border-box;
135+
}
136+
*,
137+
*::before,
138+
*::after {
139+
box-sizing: inherit;
140+
}
141+
#navigation {
142+
border: 1px solid var(--border-color);
143+
padding: 1em;
144+
margin: 0;
145+
background-image: linear-gradient(90deg, rgba(0, 0, 0, 0,5), white);
146+
}
147+
input[type="checkbox"]:checked {
148+
/* ... */
149+
}
150+
.text-center {
151+
text-align: center !important;
152+
}
153+
{% endcode %}
154+
</figure>
155+
156+
<figure>
157+
<figcaption>diff Syntax Highlighting Example</figcaption>
158+
{% code 'diff' %}
159+
Index: languages/ini.js
160+
===================================================================
161+
--- languages/ini.js (revision 199)
162+
+++ languages/ini.js (revision 200)
163+
@@ -1,8 +1,7 @@
164+
hljs.LANGUAGES.ini =
165+
{
166+
case_insensitive: true,
167+
- defaultMode:
168+
- {
169+
+ defaultMode: {
170+
contains: ['comment', 'title', 'setting'],
171+
illegal: '[^\\s]'
172+
},
173+
174+
*** /path/to/original timestamp
175+
--- /path/to/new timestamp
176+
***************
177+
*** 1,3 ****
178+
--- 1,9 ----
179+
+ This is an important
180+
+ notice! It should
181+
+ therefore be located at
182+
+ the beginning of this
183+
+ document!
184+
185+
! compress the size of the
186+
! changes.
187+
188+
It is important to spell
189+
{% endcode %}
190+
</figure>
191+
192+
<figure>
193+
<figcaption>bash Syntax Highlighting Example</figcaption>
194+
{% code 'bash' %}
195+
#!/bin/bash
196+
197+
###### CONFIG
198+
ACCEPTED_HOSTS="/root/.hag_accepted.conf"
199+
BE_VERBOSE=false
200+
201+
if [ "$UID" -ne 0 ]
202+
then
203+
echo "Superuser rights required"
204+
exit 2
205+
fi
206+
207+
genApacheConf(){
208+
echo -e "# Host ${HOME_DIR}$1/$2 :"
209+
}
210+
{% endcode %}
211+
</figure>
197212

198-
genApacheConf(){
199-
echo -e "# Host ${HOME_DIR}$1/$2 :"
200-
}
201-
{% endcode %}
213+
<figure>
214+
<figcaption>.ini Syntax Highlighting Example</figcaption>
215+
{% code 'ini' %}
216+
; boilerplate
217+
[package]
218+
name = "some_name"
219+
authors = ["Author"]
220+
description = "This is \
221+
a description"
202222

203-
<h3>INI</h3>
204-
{% code 'ini' %}
205-
; boilerplate
206-
[package]
207-
name = "some_name"
208-
authors = ["Author"]
209-
description = "This is \
210-
a description"
211-
212-
[[lib]]
213-
name = ${NAME}
214-
default = True
215-
auto = no
216-
counter = 1_000
217-
{% endcode %}
223+
[[lib]]
224+
name = ${NAME}
225+
default = True
226+
auto = no
227+
counter = 1_000
228+
{% endcode %}
229+
</figure>
218230

219-
<h3>Markdown</h3>
220-
{% code 'markdown' %}
221-
# hello world
231+
<figure>
232+
<figcaption>Markdown Syntax Highlighting Example</figcaption>
233+
{% code 'markdown' %}
234+
# hello world
222235

223-
you can write text [with links](http://example.com) inline or [link references][1].
236+
you can write text [with links](http://example.com) inline or [link references][1].
224237

225-
* one _thing_ has *em*phasis
226-
* two __things__ are **bold**
238+
* one _thing_ has *em*phasis
239+
* two __things__ are **bold**
227240

228-
[1]: http://example.com
241+
[1]: http://example.com
229242

230-
---
243+
---
231244

232-
hello world
233-
===========
245+
hello world
246+
===========
234247

235-
<this_is inline="xml"></this_is>
248+
<this_is inline="xml"></this_is>
236249

237-
> markdown is so cool
250+
> markdown is so cool
238251

239-
so are code segments
252+
so are code segments
240253

241-
1. one thing (yeah!)
242-
2. two thing `i can write code`, and `more` wipee!
243-
{% endcode %}
254+
1. one thing (yeah!)
255+
2. two thing `i can write code`, and `more` wipee!
256+
{% endcode %}
257+
</figure>
244258
</section>
245259
{% endblock %}

0 commit comments

Comments
 (0)