Code syntax highlighting

by Erfan Paslar

Posted on: 2021-03-20


Code syntax highlighting

The default highlighter is arta as you see below: 

 

But you can choose some other themes too

Let's say you want to use the Vs2015 theme, so you just do as below:

  1. open an HTML snippet
  2. write <link rel="stylesheet" href="css/h/vs2015.css"> inside it.

then everywhere in your post, the theme will be vs2015 like here:

#include<stdio.h>
int main(){
   int array[] = {1,2,3,4,5,6,7};
   int sum;
   sum = sum_array_elements(array,6);
   printf("\nSum of array elements is:%d",sum);
   return 0;
}
int sum_array_elements( int arr[], int n ) {
   if (n < 0) {
     //base case:
     return 0;
   } else{
     //Recursion: calling itself
     return arr[n] + sum_array_elements(arr, n-1);
    }
}

Don't specify the programming language!!

It will highlight the code automatically.

at first, you might not notice but if your code has lots of lines there will have a scroll problem.

 

List of all themes: (for preview see this)

  • default.css
  • a11-y-dark.css
  • a11-y-light.css
    agate.css
    an-old-hope.css
  • androidstudio.css
    arduino-light.css
  • arta.css
    ascetic.css
    atelier-cave-dark.css
    atelier-cave-light.css
    atelier-dune-dark.css
    atelier-dune-light.css
    atelier-estuary-dark.css
    atelier-estuary-light.css
    atelier-forest-dark.css
    atelier-forest-light.css
    atelier-heath-dark.css
    atelier-heath-light.css
    atelier-lakeside-dark.css
    atelier-lakeside-light.css
    atelier-plateau-dark.css
    atelier-plateau-light.css
    atelier-savanna-dark.css
    atelier-savanna-light.css
    atelier-seaside-dark.css
    atelier-seaside-light.css
    atelier-sulphurpool-dark.css
    atelier-sulphurpool-light.css
    atom-one-dark-reasonable.css
    atom-one-dark.css
    atom-one-light.css
    brown-paper.css
    codepen-embed.css
    color-brewer.css
  • darcula.css
    dark.css
    docco.css
    dracula.css
    far.css
    foundation.css
    github-gist.css
    github.css
    gml.css
    googlecode.css
    gradient-dark.css
    gradient-light.css
    grayscale.css
  • gruvbox-dark.css
    gruvbox-light.css
    hopscotch.css
    hybrid.css
    idea.css
    ir-black.css
    isbl-editor-dark.css
    isbl-editor-light.css
    kimbie-dark.css
    kimbie-light.css
    lightfair.css
    lioshi.css
    magula.css
    mono-blue.css
    monokai-sublime.css
    monokai.css
    night-owl.css
    nnfx-dark.css
    nnfx.css
    nord.css
    obsidian.css
    ocean.css
    paraiso-dark.css
    paraiso-light.css
    pojoaque.css
    purebasic.css
    qtcreator-dark.css
    qtcreator-light.css
  • railscasts.css
    rainbow.css
    routeros.css
    school-book.css
    shades-of-purple.css
    solarized-dark.css
    solarized-light.css
    srcery.css
  • stackoverflow-dark.css
    stackoverflow-light.css
    sunburst.css
    tomorrow-night-blue.css
    tomorrow-night-bright.css
  • tomorrow-night-eighties.css
  • tomorrow-night.css
    tomorrow.css
    vs.css
  • vs2015.css
    xcode.css
    xt256.css
    zenburn.css

 

for another example for gruvbox-dark, you should add this <link rel="stylesheet" href="css/h/gruvbox-dark.css"> don't forget css/h/ !!

Please don't add syntax highlighting code inside the summery section ( ゝ‿・)


Tags:

Leave a Comment: