Code tag syntax color

projects

Introduction

When I add a code html tag for a html-code-tag-default-color, it has a boring color. So I extend the color to arguments of a command. And you can change the scheme. Likes find / -name "vim". Cool!😁 You can click scheme buttons to change the code scheme.

Play scheme

Click below button to change the code tag block scheme.

history | awk -F\| '{printf("%s %s\n",NF-1,$0)}' |sort -rn|head

How to use code-tag-syntax-color.js

Add below script code before the close body tag.

<script src="https://zhihau.github.io/js/code-tag-syntax-color.js"></script>

If you want to ignore some code section, add the selector name to ignore_selectors array. And place this code before the line that include code-tag-syntax-color.js

<script>
let ignore_selectors=["htmlcode","pycode"];
</script>
<script src="https://zhihau.github.io/js/code-tag-syntax-color.js"></script>

Full example

<html>
<head>
<script>
let ignore_selectors=["htmlcode","pycode"];
</script>
<script src="https://zhihau.github.io/js/code-tag-syntax-color.js"></script>
</head>
<body>
<p>The HTML <code>button</code> tag defines a clickable button.</p>
</body>
</html>

Color Schemes

Fluorescent Color Scheme

Fluorescent color sheme

Bright Color Scheme

Bright color sheme

Metallic Color Scheme

Metallic color sheme

Silver Color Scheme

Silver color sheme

Fragrance Color Scheme

Fragrance color sheme