Feuerfest

Photo by Monstera: https://www.pexels.com/photo/woman-holding-book-with-blank-pages-6373293/

When creating links in TinyMCE the link-plugin is configured to open links in the current window. As this is the default setting. However I don't like this and changed it every time. And when you change something every single time, you should just make it your new default.

Luckily TinyMCE has good documentation about every plugin. So we learn about the default_link_target parameter we can utilize to achieve exactly this.

We open the bludit-folder/bl-plugins/tinymce/plugin.php file and search for tinymce.init. Then we add the default_link_target: '_blank' parameter at the end of the list. Don't forget to add a semicolon behind the formerly last parameter.

In the end it looks like this:

        tinymce.init({
                selector: "#jseditor",
                auto_focus: "jseditor",
                element_format : "html",
                entity_encoding : "raw",
                skin: "oxide",
                schema: "html5",
                statusbar: false,
                menubar:false,
                branding: false,
                browser_spellcheck: true,
                pagebreak_separator: PAGE_BREAK,
                paste_as_text: true,
                remove_script_host: false,
                convert_urls: true,
                relative_urls: false,
                valid_elements: "*[*]",
                cache_suffix: "?version=$version",
                $document_base_url
                plugins: ["$plugins"],
                toolbar1: "$toolbar1",
                toolbar2: "$toolbar2",
                language: "$lang",
                content_css: "$content_css",
                codesample_languages: [$codesampleConfig],
                default_link_target: '_blank'
        });

And now generated links will per-default open in a new window.

Photo by Pixabay: https://www.pexels.com/photo/computer-c-code-276452/

Bludit offers syntax highlighting via TinyMCE and it's codesample plugin, which you have to enable in the TinyMCE plugin settings first. But it offers only limited support. No Bash, no Puppet, no Perl and so on. Also I wanted line numbering when in code blocks for easier orientation. This is also not included.

The Prism.js library however offers support for many more languages and also some nice Plugins. For example for line-numbering.

To make everything work, the following tasks are necessary:

1. Download & install the Bludit-Prism Plugin from here: https://plugins.bludit.com/plugin/prism
2. Replace prism.js and prism.css files included in this Plugin with newer ones from https://prismjs.com/
   • As the one included in the Bludit Prism-Plugin only has support for: HTML/XML, JavaScript, CSS, PHP, Ruby, Python, Java, C, C#, C++
3. Add our new languages to the codesamples config in the TinyMCE plugin config. This will add them in the dropdown-menu when inserting a code-sample block
4. Edit the plugin.min.js file from the TinyMCE codesample plugin to automatically included the line-numbers plugin into the HTML pre-element.
   • Found this solution here: https://github.com/tinymce/tinymce/issues/2771#issuecomment-232910444

For a general overview, and a little bit of background why the Prism plugin was created, see this link: https://forum.bludit.org/viewtopic.php?t=1818

As I'm somewhat new to Bludit I can't assess if this is the best approach. But for me it works. ;-)

1. Download & install the Bludit-Prism Plugin from here: https://plugins.bludit.com/plugin/prism
   • Then activate it on the Bludit Plugins page
2. Download prism.js and prism.css from https://prismjs.com/
   • Include all languages and plugins you need
   • Note: You need to use the JS and CSS-file from the same generation! You can't mix features or versions.
3. Go to: bludit-folder/bl-plugins/prism and make a backup copy of the original files

   • mv js/prism.js js/prism.js.backup
     mv css/prism.css css/prism.css.backup
     

4. Download new prism.js and prism.css and put into the correct folders
5. Go to: Plugins -> TinyMCE -> Codesample languages and add your new languages, in my case:
   • Bash sh|RegEx regex|Puppet puppet|Perl perl|Python python|HTML/XML markup|JavaScript javascript|CSS css|PHP php|Ruby ruby
   • Unrelated side info: This will be written in the file bludit-folder/bl-content/databases/plugins/tinymce/db.php. I was just curious how/where this change is persisted.
6. Now you will have syntax highlighting. But only in the generated HTML files, not in the TinyMCE code-blocks!
7. To automatically include the line-numbers plugin from Prism.js we need to include the "line-numbers" class into the pre-element. This is done in the following way:
   • Open: bludit-folder/bl-plugins/tinymce/tinymce/plugins/codesample/plugin.min.js
   • Search for <pre and in the class property add line-numbers. It should now look like this: t.insertContent('<pre id="__new" class="language-'+a+' line-numbers">'+r+"</pre>")
   • A little after that pre you will also find t.dom.setAttrib(e,"class","language-"+a), add the line-numbers class in there too, it should look like this: t.dom.setAttrib(e,"class","line-numbers language-"+a)
   • Again, thanks to this comment on GitHub: https://github.com/tinymce/tinymce/issues/2771#issuecomment-232910444
8. Keep in mind: As Bludit is a static file generator, your previously generated pages won't get this automatically. Here you will have to edit the pre-element manually.

If you are interested in some examples, have a look at this page: https://admin.brennt.net/syntax-highlighting-test with line-numbering and without, etc.

Photo by Ylanite Koppens: https://www.pexels.com/photo/used-pens-on-white-surface-1152665/

Bash:tst

#!/bin/bash
# vim: set tabstop=2 smarttab shiftwidth=2 softtabstop=2 expandtab foldmethod=syntax :
#
#
ICINGA2_API_USER="icinga2apitest"
ICINGA2_API_PASSWORD="notarealpassword"
ICINGA2_API_HOST="somehost"
ICINGA2_API_PORT="5665"

SCRIPT="$(basename "$0")"
JSON_PP="$(which json_pp)"
CURL="$(which curl)"

# Test if curl is present and executeable
if [ ! -x "$CURL" ]; then
  echo "This script requires curl for sending HTTP(S)-Requests to the API"
  exit 3;
fi

# Test if json_pp is present and executeable
if [ ! -x "$JSON_PP" ]; then
  echo "This script requires json_pp (pretty-print JSON) to display the retrieved results in a nice JSON-formatted syntax."
  exit 4;
fi

function HELP {
  echo "$SCRIPT: Query the Icinga2-API for latest check results"
  echo "Usage: $SCRIPT FQDN Servicename"
  echo ""
  echo "Both FQDN & Servicename can specified as RegEx."
  echo "Provide only FQDN to list all Services of this host."
}

# For later version where it's possible to specify what results to retrieve from the API
ONLY_ERRORS="&& !match(\"0\",service.state)"
HOSTFILTER="\"filter\": \"match(\"'$HOST'\",host.name)"
SERVICEFILTER="\"filter\": \"regex(pattern, service.name)\", \"filter_vars\": { \"pattern\": \"'$SERVICENAME'\" }"

HTML:

<html>
<head>
  <title>Test</title>
</head>
<body>
Bla!
</body>
</html>

Ruby:

def sum_eq_n?(arr, n)
  return true if arr.empty? && n == 0
  arr.product(arr).reject { |a,b| a == b }.any? { |a,b| a + b == n }
end

Puppet:

class java (
  String                                                    $distribution           = 'jdk',
  Pattern[/present|installed|latest|^[.+_0-9a-zA-Z:~-]+$/]  $version                = 'present',
  Optional[String]                                          $package                = undef,
  Optional[Array]                                           $package_options        = undef,
  Optional[String]                                          $java_alternative       = undef,
  Optional[String]                                          $java_alternative_path  = undef,
  Optional[String]                                          $java_home              = undef
) {
  contain java::params

}

Python:

# Python program to check
# if a string is binary or not
 
# function for checking the
# string is accepted or not
 
 
def check(string):
 
    # set function convert string
    # into set of characters .
    p = set(string)
 
    # declare set of '0', '1' .
    s = {'0', '1'}
 
    # check set p is same as set s
    # or set p contains only '0'
    # or set p contains only '1'
    # or not, if any one condition
    # is true then string is accepted
    # otherwise not .
    if s == p or p == {'0'} or p == {'1'}:
        print("Yes")
    else:
        print("No")
 
 
# driver code
if __name__ == "__main__":
 
    string = "101010000111"
 
    # function calling
    check(string)

RegEx:

$ grep --version
grep (GNU grep) 2.7
$ grep -E '\b(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?(\.|$)){4}\b' <<< 192.168.1.1
192.168.1.1
$ grep -E '\b(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?(\.|$)){4}\b' <<< 192.168.1.255
192.168.1.255
$ grep -E '\b(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?(\.|$)){4}\b' <<< 192.168.255.255
$ grep -E '\b(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?(\.|$)){4}\b' <<< 192.168.1.2555
192.168.1.2555

Photo by Steve Johnson from Pexels: https://www.pexels.com/photo/four-white-travel-adapters-1694830/

If you run Bludit you might want to give the Admin Bar Plugin a try. It adds a admin bar on top or bottom (configureable) which gives you this neat & handy "Edit post" button when you are logged in. Also quicklinks to all relevant sections (Content, Categories, General, Settings, etc.) and a "New post" button.

Handy.

My recommendation:

• Show site name: Enabled
  • Name of your site with link to it. Useful if you need to get to the front page quickly
• Show extended menu: Enabled (Default)
• Show site settings: Disabled (Default)
• Position of admin bar: Bottom (Default)
  • Else it will overlap with your static sites and search bar

Photo by Pixabay from Pexels: https://www.pexels.com/photo/blur-bright-business-codes-207580/

Most fonts, especially the standard ones coming with Windows/Linux are awful for usage in terminal applications like PuTTY, xterm, etc. Or the reading of technical output at all. Most of them aren't optimized to allow the easy recognition of characters and symbols you rarely encounter in a written document. But do so even more in a technical environment.

I mean, when did you ever read a newspaper which had all of these characters printed in one single article?

, ; . : | * ~ ' # < > ` ´ ^ [ ] { }

Additionally, many standard fonts aren't monospaced. This means: Each single character takes the same width. No matter if letter (upper- or lowercase), number or special character. Which gives such a HUGE boost to readability (and therefore performance) that I can't stress this point enough. Comparing output/logfile lines or just spotting anomalies gets significantly easier.

Usually "Which font do you use?" is a good conversation starter (or interview question ;-) ) when your counterpart is a seasoned sysadmin or developer.

So which ones do I use?

Currently I use the INPUT font in monospaced from David Jonathan Ross.

You can get a preview here: https://input.djr.com/preview/ and play around with all the options. Then, choose the one you like and import it into your systems font catalogue.

Sadly I can't use it for this blog. As web usage isn't free. And the offered rates/prices are way too overpriced for a little blog like this. (The cheapest is literally 1000 US-$ per month. Which is absolutely no price range for personal projects..)

Before that I used the Roboto Mono font, but I found some special characters rather hard to read or indistinguishable from another. So I asked around and was recommend the INPUT font, which I now use for some years.

Other fonts I got recommended were:

• DejaVuSansMono Nerd Font Mono (from https://www.nerdfonts.com/font-downloads)
• Fonts based on IBM terminal fonts (from https://int10h.org/oldschool-pc-fonts/fontlist/)

Photo by freestocks.org: https://www.pexels.com/photo/person-holding-space-gray-iphone-5-34407/

1. Make sure your Content-Security-Policy header allows it. This should be enough to see the thumbnail and play the video:
   • In your CSP configuration: frame-src youtube.com www.youtube.com
   • If you want CSS, etc. you may need to configure additional headers
   • If you omit this step and you DO have a CSP in place, your browser will just show a "This content has been blocked by a policy"-message or similar. Open your browsers developer console to check for CSP related errors.
2. In Bludit, go to: Plugins -> TinyMCE -> Settings
3. Add media to the "Toolbar top" and "Plugins" fields. Now the button for easier embedding of videos will show up.
   • Of course you can also copy&paste the iFrame-code from the Youtube-Share link and use the source code view (<> Button) to insert it manually.
4. Profit!