/
index.html
220 lines (169 loc) · 9.74 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="assets/favicon.png" />
<title>Command Line ▲ Prism plugins</title>
<base href="../.." />
<link rel="stylesheet" href="assets/style.css" />
<link rel="stylesheet" href="themes/prism.css" data-noprefix />
<link rel="stylesheet" href="plugins/command-line/prism-command-line.css" data-noprefix />
<script src="assets/vendor/prefixfree.min.js"></script>
<script>var _gaq = [['_setAccount', 'UA-33746269-1'], ['_trackPageview']];</script>
<script src="https://www.google-analytics.com/ga.js" async></script>
</head>
<body>
<header data-plugin-header="command-line"></header>
<section class="language-markup">
<h1>How to use</h1>
<p>This is intended for code blocks (<code class="language-markup"><pre><code></code>) and not for inline code.</p>
<p>Add class <strong>command-line</strong> to your <code class="language-markup"><pre></code>. For a server command line, specify the user and host names using the <code class="language-markup">data-user</code> and <code class="language-markup">data-host</code> attributes. The resulting prompt displays a <strong>#</strong> for the root user and <strong>$</strong> for all other users. For any other command line, such as a Windows prompt, you may specify the entire prompt using the <code class="language-markup">data-prompt</code> attribute.</p>
<h2>Optional: Command output (positional)</h2>
<p>You may specify the lines to be presented as output (no prompt and no highlighting) through the <code class="language-markup">data-output</code> attribute on the <code class="language-markup"><pre></code> element in the following simple format:</p>
<ul>
<li>A single number refers to the line with that number</li>
<li>Ranges are denoted by two numbers, separated with a hyphen (-)</li>
<li>Multiple line numbers or ranges are separated by commas.</li>
<li>Whitespace is allowed anywhere and will be stripped off.</li>
</ul>
<p>Examples:</p>
<dl>
<dt>5</dt>
<dd>The 5th line</dd>
<dt>1-5</dt>
<dd>Lines 1 through 5</dd>
<dt>1,4</dt>
<dd>Line 1 and line 4</dd>
<dt>1-2, 5, 9-20</dt>
<dd>Lines 1 through 2, line 5, lines 9 through 20</dd>
</dl>
<h2>Optional: Command output (prefix)</h2>
<p>To automatically present some lines as output, you can prefix those lines with any string and specify the prefix using the <code class="language-markup">data-filter-output</code> attribute on the <code class="language-markup"><pre></code> element. For example, <code class="language-markup">data-filter-output="(out)"</code> will treat lines beginning with <code class="language-markup">(out)</code> as output and remove the prefix.</p>
<p>A blank line will render as an empty line with a prompt. If you want an empty line without a prompt then you can use a line containing just the output prefix, e.g. <code class="language-markup">(out)</code>. See the blank lines in the examples below.</p>
<p>Output lines are user selectable by default, so if you select the whole content of the code block, it will select the shell commands and any output lines. This may not be desirable if you want to copy/paste just the commands and not the output. If you want to make the output not user selectable then add the following to your CSS:</p>
<pre><code class="language-css">.command-line span.token.output {
user-select: none;
}</code></pre>
<h2>Optional: Multi-line commands</h2>
<p>You can configure the plugin to handle multi-line commands. This can be done in two ways; setting a line continuation string (as in Bash); or explicitly marking continuation lines with a prefix for languages that do not have a continuation string/character, e.g. SQL, Scala, etc..</p>
<dl>
<dt><code class="language-markup">data-continuation-str</code></dt>
<dd>Set this attribute to the line continuation string/character, e.g. for bash <code class="language-markup">data-continuation-str="\"</code></dd>
<dt><code class="language-markup">data-filter-continuation</code></dt>
<dd>This works in a similar way to <code class="language-markup">data-filter-output</code>. Prefix all continuation lines with the value of <code class="language-markup">data-filter-continuation</code> and they will be displayed with the prompt set in <code class="language-markup">data-continuation-prompt</code>. For example, <code class="language-markup">data-filter-continuation="(con)"</code> will treat lines beginning with <code class="language-markup">(con)</code> as continuation lines and remove the prefix.</dd>
<dt><code class="language-markup">data-continuation-prompt</code></dt>
<dd>Set this attribute to define the prompt to be displayed when the command has continued beyond the first line (whether using line continuation or command termination), e.g. for MySQL <code class="language-markup">data-continuation-prompt="->"</code>. If this attribute is not set then a default of <code class="language-markup">></code> will be used.</dd>
</dl>
</section>
<section>
<h1>Examples</h1>
<h2>Default Use Without Output</h2>
<pre><code class="language-html"><pre class="command-line"></code></pre>
<pre class="command-line"><code class="language-bash">cd ~/.vim
vim vimrc</code></pre>
<h2>Root User Without Output</h2>
<pre><code class="language-html"><pre class="command-line"
data-user="root"
data-host="localhost"></code></pre>
<pre class="command-line" data-user="root" data-host="localhost"><code class="language-bash">cd /usr/local/etc
cp php.ini php.ini.bak
vi php.ini</code></pre>
<h2>Non-Root User With Output</h2>
<pre><code class="language-html"><pre class="command-line"
data-user="chris"
data-host="remotehost"
data-output="2, 4-8"></code></pre>
<pre class="command-line" data-user="chris" data-host="remotehost" data-output="2, 4-8"><code class="language-bash">pwd
/usr/home/chris/bin
ls -la
total 2
drwxr-xr-x 2 chris chris 11 Jan 10 16:48 .
drwxr--r-x 45 chris chris 92 Feb 14 11:10 ..
-rwxr-xr-x 1 chris chris 444 Aug 25 2013 backup
-rwxr-xr-x 1 chris chris 642 Jan 17 14:42 deploy</code></pre>
<h2>Windows PowerShell With Output</h2>
<pre><code class="language-html"><pre class="command-line"
data-prompt="PS C:\Users\Chris>"
data-output="2-19"></code></pre>
<pre class="command-line" data-prompt="PS C:\Users\Chris>" data-output="2-19"><code class="language-powershell">dir
Directory: C:\Users\Chris
Mode LastWriteTime Length Name
---- ------------- ------ ----
d-r-- 10/14/2015 5:06 PM Contacts
d-r-- 12/12/2015 1:47 PM Desktop
d-r-- 11/4/2015 7:59 PM Documents
d-r-- 10/14/2015 5:06 PM Downloads
d-r-- 10/14/2015 5:06 PM Favorites
d-r-- 10/14/2015 5:06 PM Links
d-r-- 10/14/2015 5:06 PM Music
d-r-- 10/14/2015 5:06 PM Pictures
d-r-- 10/14/2015 5:06 PM Saved Games
d-r-- 10/14/2015 5:06 PM Searches
d-r-- 10/14/2015 5:06 PM Videos</code></pre>
<h2>Line continuation with Output (bash)</h2>
<pre><code class="language-html"><pre class="command-line"
data-filter-output="(out)"
data-continuation-str="\" ></code></pre>
<pre class="command-line" data-filter-output="(out)" data-continuation-str="\" ><code class="language-bash">export MY_VAR=123
echo "hello"
(out)hello
echo one \
two \
three
(out)one two three
(out)
echo "goodbye"
(out)goodbye</code></pre>
<h2>Line continuation with Output (PowerShell)</h2>
<pre><code class="language-html"><pre class="command-line"
data-prompt="ps c:\users\chris>"
data-continuation-prompt=">>"
data-filter-output="(out)"
data-continuation-str=" `"></code></pre>
<pre class="command-line" data-prompt="ps c:\users\chris>" data-continuation-prompt=">>" data-filter-output="(out)" data-continuation-str=" `"><code class="language-powershell">Write-Host `
'Hello' `
'from' `
'PowerShell!'
(out)Hello from PowerShell!
Write-Host 'Goodbye from PowerShell!'
(out)Goodbye from PowerShell!</code></pre>
<h2>Line continuation using prefix (MySQL/SQL)</h2>
<pre><code class="language-html"><pre class="command-line"
data-prompt="mysql>"
data-continuation-prompt="->"
data-filter-output="(out)"
data-filter-continuation="(con)"></code></pre>
<pre class="command-line" data-prompt="mysql>" data-continuation-prompt="->" data-filter-output="(out)" data-filter-continuation="(con)"><code class="language-sql">set @my_var = 'foo';
set @my_other_var = 'bar';
(out)
CREATE TABLE people (
(con)first_name VARCHAR(30) NOT NULL,
(con)last_name VARCHAR(30) NOT NULL
(con));
(out)Query OK, 0 rows affected (0.09 sec)
(out)
insert into people
(con)values ('John', 'Doe');
(out)Query OK, 1 row affected (0.02 sec)
(out)
select *
(con)from people
(con)order by last_name;
(out)+------------+-----------+
(out)| first_name | last_name |
(out)+------------+-----------+
(out)| John | Doe |
(out)+------------+-----------+
(out)1 row in set (0.00 sec)</code></pre>
</section>
<footer data-src="assets/templates/footer.html" data-type="text/html"></footer>
<script src="prism.js"></script>
<script src="plugins/command-line/prism-command-line.js"></script>
<script src="assets/vendor/utopia.js"></script>
<script src="components.js"></script>
<script src="assets/code.js"></script>
<script src="components/prism-bash.js"></script>
<script src="components/prism-powershell.js"></script>
<script src="components/prism-sql.js"></script>
</body>
</html>