Day 11

Tips and Tricks: Commands plugin

As we have full control over how the code and plugins used will be displayed with Photon, let's create some interesting results!

Check the Commands plugin documentation here.

Prompt symbol

The .psh-commands::before selector contains the content property with > value by default. To change the prompt symbol this value can be replaced by $, # or any other string.

Example

CSS

.psh-commands::before {
  content: '$';
}

Result

./configure
make
make install

Example

CSS

.psh-commands::before {
  content: 'root@kali:~#';
}

Result

./configure
make
make install

Output text

The commands plugin is especially useful in combination with the HTML <samp> element to display the output text of a program or command.

Example

CSS

.psh.psh-code + .psh.psh-samp {
  margin: -24px 0 24;
}

Input

<pre><code class="language-text" data-commands="true">curl --head https://www.github.com</code></pre>
<pre><samp class="language-text" data-caption="Output">HTTP/1.1 301 Moved Permanently
Content-length: 0
Location: https://github.com/
Connection: close</samp></pre>

Result

curl --head https://www.github.com
Output
HTTP/1.1 301 Moved Permanently
Content-length: 0
Location: https://github.com/
Connection: close

You can extend this tips and tricks section by sending us your contributions through Twitter, email or GitHub.

Share on

Facebook Twitter Google+ LinkedIn