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!

Tips and Tricks: Commands plugin
Tips and Tricks: Commands plugin

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