Crayon Syntax Highlighter Plugin Theme Color Previews (Demo)

https://www.techdiary.io/crayon-syntax-highlighter-demo/

Crayon Syntax Highlighter

Crayon Syntax Highlighter is awesome. While working on one of my blog posts, I was looking for a way to highlight my code examples so it is easy for others to view, copy or see the code highlights. Thethemeforest wordpress theme that I am using does offer shortcodes, but I felt that was not adequate for my liking. After trying several plugins, I settled onCrayon Syntax Highlighter plugin.

The plugin provides so many themes that it look a while to pick a theme that works well with my wordpress theme. After experimenting with several themes and spending a good chunk of time, I am using a mix of Sublime Text and Orange Code Theme. I thought it would be a time saver for someone looking to implement this if I could just show how the various themes looked all at once. I have listed all the available themes in the Crayon Syntax Highlighter plugin at the time of writing this blog post. Below are the various themes which are using the “sourcecode pro” font. You can refer to the complete documentation and source code provided by Aram Kocharyan on GitHub.

1c Kod Theme

1c Kod theme
1
2
3
4
5
6
7
8
9
10
11
@Component({
  templateUrl: 'build/app.html',
  pipes: [TranslatePipe]
})
 
ionicBootstrap(MyApp, [[provide(TranslateLoader, {
  useFactory: (http: Http) => new TranslateStaticLoader(http, 'assets/i18n', '.json'),
  deps: [Http]
}),
  TranslateService]], {
});

1c Zapros Theme

1c Zapros theme
1
2
3
4
5
6
7
8
9
10
11
@Component({
  templateUrl: 'build/app.html',
  pipes: [TranslatePipe]
})
 
ionicBootstrap(MyApp, [[provide(TranslateLoader, {
  useFactory: (http: Http) => new TranslateStaticLoader(http, 'assets/i18n', '.json'),
  deps: [Http]
}),
  TranslateService]], {
});

809finest Theme

809finest theme
1
2
3
4
5
6
7
8
9
10
11
@Component({
  templateUrl: 'build/app.html',
  pipes: [TranslatePipe]
})
 
ionicBootstrap(MyApp, [[provide(TranslateLoader, {
  useFactory: (http: Http) => new TranslateStaticLoader(http, 'assets/i18n', '.json'),
  deps: [Http]
}),
  TranslateService]], {
});

Ado Theme

Ado theme
1
2
3
4
5
6
7
8
9
10
11
@Component({
  templateUrl: 'build/app.html',
  pipes: [TranslatePipe]
})
 
ionicBootstrap(MyApp, [[provide(TranslateLoader, {
  useFactory: (http: Http) => new TranslateStaticLoader(http, 'assets/i18n', '.json'),
  deps: [Http]
}),
  TranslateService]], {
});

Amity Theme

Amity theme
1
2
3
4
5
6
7
8
9
10
11
@Component({
  templateUrl: 'build/app.html',
  pipes: [TranslatePipe]
})
 
ionicBootstrap(MyApp, [[provide(TranslateLoader, {
  useFactory: (http: Http) => new TranslateStaticLoader(http, 'assets/i18n', '.json'),
  deps: [Http]
}),
  TranslateService]], {
});

Arduino Ide Theme

Arduino Ide theme
1
2
3
4
5
6
7
8
9
10
11
@Component({
  templateUrl: 'build/app.html',
  pipes: [TranslatePipe]
})
 
ionicBootstrap(MyApp, [[provide(TranslateLoader, {
  useFactory: (http: Http) => new TranslateStaticLoader(http, 'assets/i18n', '.json'),
  deps: [Http]
}),
  TranslateService]], {
});

Bncplusplus Theme

Bncplusplus theme
1
2
3
4
5
6
7
8
9
10
11
@Component({
  templateUrl: 'build/app.html',
  pipes: [TranslatePipe]
})
 
ionicBootstrap(MyApp, [[provide(TranslateLoader, {
  useFactory: (http: Http) => new TranslateStaticLoader(http, 'assets/i18n', '.json'),
  deps: [Http]
}),
  TranslateService]], {
});

Capacitacionti Theme

Capacitacionti theme
1
2
3
4
5
6
7
8
9
10
11
@Component({
  templateUrl: 'build/app.html',
  pipes: [TranslatePipe]
})
 
ionicBootstrap(MyApp, [[provide(TranslateLoader, {
  useFactory: (http: Http) => new TranslateStaticLoader(http, 'assets/i18n', '.json'),
  deps: [Http]
}),
  TranslateService]], {
});

Cg Cookie Theme

Cisco Router Theme

Cisco Router theme
1
2
3
4
5
6
7
8
9
10
11
@Component({
  templateUrl: 'build/app.html',
  pipes: [TranslatePipe]
})
 
ionicBootstrap(MyApp, [[provide(TranslateLoader, {
  useFactory: (http: Http) => new TranslateStaticLoader(http, 'assets/i18n', '.json'),
  deps: [Http]
}),
  TranslateService]], {
});

Classic Theme

Classic theme
1
2
3
4
5
6
7
8
9
10
11
@Component({
  templateUrl: 'build/app.html',
  pipes: [TranslatePipe]
})
 
ionicBootstrap(MyApp, [[provide(TranslateLoader, {
  useFactory: (http: Http) => new TranslateStaticLoader(http, 'assets/i18n', '.json'),
  deps: [Http]
}),
  TranslateService]], {
});

Coda Special Board Theme

Coda Special Board theme
1
2
3
4
5
6
7
8
9
10
11
@Component({
  templateUrl: 'build/app.html',
  pipes: [TranslatePipe]
})
 
ionicBootstrap(MyApp, [[provide(TranslateLoader, {
  useFactory: (http: Http) => new TranslateStaticLoader(http, 'assets/i18n', '.json'),
  deps: [Http]
}),
  TranslateService]], {
});

Coy Theme

Coy theme
1
2
3
4
5
6
7
8
9
10
11
@Component({
  templateUrl: 'build/app.html',
  pipes: [TranslatePipe]
})
 
ionicBootstrap(MyApp, [[provide(TranslateLoader, {
  useFactory: (http: Http) => new TranslateStaticLoader(http, 'assets/i18n', '.json'),
  deps: [Http]
}),
  TranslateService]], {
});

Dark Terminal Theme

Dark Terminal theme
1
2
3
4
5
6
7
8
9
10
11
@Component({
  templateUrl: 'build/app.html',
  pipes: [TranslatePipe]
})
 
ionicBootstrap(MyApp, [[provide(TranslateLoader, {
  useFactory: (http: Http) => new TranslateStaticLoader(http, 'assets/i18n', '.json'),
  deps: [Http]
}),
  TranslateService]], {
});

Eclipse Theme

Eclipse theme
1
2
3
4
5
6
7
8
9
10
11
@Component({
  templateUrl: 'build/app.html',
  pipes: [TranslatePipe]
})
 
ionicBootstrap(MyApp, [[provide(TranslateLoader, {
  useFactory: (http: Http) => new TranslateStaticLoader(http, 'assets/i18n', '.json'),
  deps: [Http]
}),
  TranslateService]], {
});

Epicgeeks Theme

Epicgeeks theme
1
2
3
4
5
6
7
8
9
10
11
@Component({
  templateUrl: 'build/app.html',
  pipes: [TranslatePipe]
})
 
ionicBootstrap(MyApp, [[provide(TranslateLoader, {
  useFactory: (http: Http) => new TranslateStaticLoader(http, 'assets/i18n', '.json'),
  deps: [Http]
}),
  TranslateService]], {
});

Familiar Theme

Familiar theme
1
2
3
4
5
6
7
8
9
10
11
@Component({
  templateUrl: 'build/app.html',
  pipes: [TranslatePipe]
})
 
ionicBootstrap(MyApp, [[provide(TranslateLoader, {
  useFactory: (http: Http) => new TranslateStaticLoader(http, 'assets/i18n', '.json'),
  deps: [Http]
}),
  TranslateService]], {
});

Feeldesign Theme

Feeldesign theme
1
2
3
4
5
6
7
8
9
10
11
@Component({
  templateUrl: 'build/app.html',
  pipes: [TranslatePipe]
})
 
ionicBootstrap(MyApp, [[provide(TranslateLoader, {
  useFactory: (http: Http) => new TranslateStaticLoader(http, 'assets/i18n', '.json'),
  deps: [Http]
}),
  TranslateService]], {
});

Flatui Light Theme

Flatui Light theme
1
2
3
4
5
6
7
8
9
10
11
@Component({
  templateUrl: 'build/app.html',
  pipes: [TranslatePipe]
})
 
ionicBootstrap(MyApp, [[provide(TranslateLoader, {
  useFactory: (http: Http) => new TranslateStaticLoader(http, 'assets/i18n', '.json'),
  deps: [Http]
}),
  TranslateService]], {
});

Github Theme

Github theme
1
2
3
4
5
6
7
8
9
10
11
@Component({
  templateUrl: 'build/app.html',
  pipes: [TranslatePipe]
})
 
ionicBootstrap(MyApp, [[provide(TranslateLoader, {
  useFactory: (http: Http) => new TranslateStaticLoader(http, 'assets/i18n', '.json'),
  deps: [Http]
}),
  TranslateService]], {
});

Idle Theme

Idle theme
1
2
3
4
5
6
7
8
9
10
11
@Component({
  templateUrl: 'build/app.html',
  pipes: [TranslatePipe]
})
 
ionicBootstrap(MyApp, [[provide(TranslateLoader, {
  useFactory: (http: Http) => new TranslateStaticLoader(http, 'assets/i18n', '.json'),
  deps: [Http]
}),
  TranslateService]], {
});

Inlellij Idea Theme

Inlellij Idea theme
1
2
3
4
5
6
7
8
9
10
11
@Component({
  templateUrl: 'build/app.html',
  pipes: [TranslatePipe]
})
 
ionicBootstrap(MyApp, [[provide(TranslateLoader, {
  useFactory: (http: Http) => new TranslateStaticLoader(http, 'assets/i18n', '.json'),
  deps: [Http]
}),
  TranslateService]], {
});

Iris Vfx Theme

Iris Vfx theme
1
2
3
4
5
6
7
8
9
10
11
@Component({
  templateUrl: 'build/app.html',
  pipes: [TranslatePipe]
})
 
ionicBootstrap(MyApp, [[provide(TranslateLoader, {
  useFactory: (http: Http) => new TranslateStaticLoader(http, 'assets/i18n', '.json'),
  deps: [Http]
}),
  TranslateService]], {
});

Kaderu Theme

Kaderu theme
1
2
3
4
5
6
7
8
9
10
11
@Component({
  templateUrl: 'build/app.html',
  pipes: [TranslatePipe]
})
 
ionicBootstrap(MyApp, [[provide(TranslateLoader, {
  useFactory: (http: Http) => new TranslateStaticLoader(http, 'assets/i18n', '.json'),
  deps: [Http]
}),
  TranslateService]], {
});

Kayote Theme

Kayote theme
1
2
3
4
5
6
7
8
9
10
11
@Component({
  templateUrl: 'build/app.html',
  pipes: [TranslatePipe]
})
 
ionicBootstrap(MyApp, [[provide(TranslateLoader, {
  useFactory: (http: Http) => new TranslateStaticLoader(http, 'assets/i18n', '.json'),
  deps: [Http]
}),
  TranslateService]], {
});

Light Abite Theme

Light Abite theme
1
2
3
4
5
6
7
8
9
10
11
@Component({
  templateUrl: 'build/app.html',
  pipes: [TranslatePipe]
})
 
ionicBootstrap(MyApp, [[provide(TranslateLoader, {
  useFactory: (http: Http) => new TranslateStaticLoader(http, 'assets/i18n', '.json'),
  deps: [Http]
}),
  TranslateService]], {
});

Crayon Syntax Highlighter Plugin Theme Color Previews (Demo)