Code Block in Blogger

Inserting code block in Blogger is basically to insert your code between HTML code tags. But it is very raw and without syntax highlighting. To get the code block with syntax highlighting and styling, you can use highlight.js. It is also on GitHub @ highlight.js GitHub.
On the highlight.js GitHub pages, copy and paste on the top of post the snippet of HTML and replace respective library link with the links copied from chnjs.com/libraries/highlight.js as follow. 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/styles/github-dark.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/highlight.min.js"></script>
<script>hljs.highlightAll();</script>
Then in HTML View of Blogger's composing post/page, insert your codes between <pre><code class="language-name> and </code></pre> and replace name with the name of the language. Eg. 
<pre><code class="language-sh">your codes is here...</code></pre>
This way is much better and cleaner than editing Blogger Theme's HTML Codes. See the following example. 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/styles/github-dark.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/highlight.min.js"></script>
<script>hljs.highlightAll();</script>

<span style="font-size: large;">
  <p>
    Example of paragraph. <b>this is bold font</b> and <i>this is italic font</i>.
  </p>
</span>

<pre><code class="language-sh">#!/bin/dash

# insert code here ...

</code></pre>

Comments

Post a Comment

Popular posts from this blog

printf - Printing with format

Image
printf formats and prints its arguments according to format, a character string which contains three types of objects: plain characters, which are simply copied to standard output, character escape sequences which are converted and copied to the standard output, and format specifications, each of which causes printing of the next successive value.   To Get Zero Leading Number $ printf "%03d" 1 $ 001   To Print Line by Line Including Speces in Terminal Interactive script in terminal sometime requires to clear terminal's face and print line by line without flickering the terminal's face. In that case, using printf "%-*.*s%s\n" "$MINCOL" "$MAXCOL" "string of the line" is a trick. For breaking down, %-*.*s is for width i.e., minimum number of columns and maximum number of columns. In above example, "$MINCOL" and "$MAXCOL" are variables of minimum and maximum...
Read more

rebase or no-rebase for git pull

Image
In the following scenario, the safest option is using git pull --rebase or setting configuration by git config pull.rebase true . Analysis of the scenario Current state on Remote : File aaaaa.txt exits and file bbbbb.txt does not exist yet. Current state on Local : File aaaaa.txt does not exist and file bbbbb.txt has been created. In above scenario and local repository on the computer, git push will fail with the following message: To https://codeberg.org/minsoehan/ttmy.git ! [rejected] main -> main (fetch first) error: failed to push some refs to 'https://codeberg.org/minsoehan/ttmy.git' hint: Updates were rejected because the remote contains work that you do not hint: have locally. This is usually caused by another repository pushing to hint: the same ref. If you want to integrate the remote changes, use hint: 'git pull' before pushing again. hint: See the 'Note about fast-forwards' in 'git push -...
Read more

dmmsh-wlr for managing outputs in Wayland using wlr-randr

Managing outputs in Wayland is smooth and easy by using wlr-randr while some compositors such as sway and hyprland have their own tools to manage outputs. See: sway-output(5) man page and Monitors - Hyprland Wiki respectively. To automate managing the outputs, the following dash script is provided by mshii. #!/bin/dash # check if it is run as root and exit if [ $(($(id -u))) -eq 0 ]; then exit 0 fi # test if it is already running and exit SCRIPTNAME= " $(basename -- $0) " if pidof -x " $SCRIPTNAME " -o $$ > /dev/null 2>&1; then notify-send -t 2700 "clean exit" "the script is already running" exit 0 fi # chech if it is in terminal or exit isinterminal_func () { case " $(ps -o stat= -p $$) " in *+*) echo "in terminal, continue..." ;; *) notify-send -t 2700 "clean exit" "please run it in terminal." ; exit 0 ;; esac } # simp...
Read more