How to copy terminal text into your blog
Here I present an easy way to copy terminal text into your blog while preserving original coloring.
Desired result
Blog pages written in Markdown offer easy syntax to insert code blocks through the use of consecutive backquotes such as: ```
Additionally, a user can indicate that a block of code corresponds to terminal text by adding the word terminal after the first set of backquotes: ```terminal
However, this code block will not be aware of any greater context, such that text which should be rendered in colors like this:
~/code/example_project master ❯ git lg * 0fbaf73 - (HEAD -> master) Change .gitignore (4 days ago) <Tim> * a0fafcb - Merge branch 'example-dev-branch' (4 days ago) <Tim> |\ | * d6ef10e - (example-dev-branch) Add another file (4 days ago) <Tim> | * 5434c8e - Added some files (4 days ago) <Tim> * | fb95415 - Add a file (4 days ago) <Tim> |/ * bf7889c - Add .gitignore (4 days ago) <Tim>
…is actually rendered like this:
~/code/example_project master ❯ git lg
* 0fbaf73 - (HEAD -> master) Change .gitignore (4 days ago) <Tim>
* a0fafcb - Merge branch 'example-dev-branch' (4 days ago) <Tim>
|\
| * d6ef10e - (example-dev-branch) Add another file (4 days ago) <Tim>
| * 5434c8e - Added some files (4 days ago) <Tim>
* | fb95415 - Add a file (4 days ago) <Tim>
|/
* bf7889c - Add .gitignore (4 days ago) <Tim>In this blog, I’ll explain how you can get your terminal example text looking like the first example instead of the second.
Step 1: Copy as HTML
Using Gnome terminal v3.36.9, you can highlight a block of text, right-click, and select Copy as HTML. Pasting that raw HTML into your blog’s Markdown will produce something such as:
~/code/example_project master ❯ git lg * 0fbaf73 - (HEAD -> master) Change .gitignore (4 days ago) <Tim> * a0fafcb - Merge branch 'example-dev-branch' (4 days ago) <Tim> |\ | * d6ef10e - (example-dev-branch) Add another file (4 days ago) <Tim> | * 5434c8e - Added some files (4 days ago) <Tim> * | fb95415 - Add a file (4 days ago) <Tim> |/ * bf7889c - Add .gitignore (4 days ago) <Tim>
Step 2: Create class for terminal block
To make the terminal text more appealing, you can add the following class to your website’s CSS:
.terminal {
font-size: 15px;
color: white;
background-color: black;
font-family: monospace;
overflow: scroll;
padding: 10px;
border-radius: 10px;
-ms-overflow-style: none; /* Internet Explorer 10+, make scrollbars invisible */
scrollbar-width: none; /* Firefox, make scrollbars invisible */
}
.terminal::-webkit-scrollbar { /* WebKit, make scrollbars invisible */
width: 0;
height: 0;
}Font-size, color, background-color, padding, and border-radius are all fields that you may want to consider changing per your personal preference.
Step 3: Add class to HTML
Finally, you will need to apply the class created in step 2 to your terminal text HTML:
<pre class=terminal>That’s all there is to it! In cases where you’d like to represent text exactly as it appears in your terminal, copying HTML directly into your blog page is a very simple approach.
Edits
- 23 February 2022: Add Firefox support