<pre><code> (HTML standar). HTML sudah menyediakan tag <pre> dan <code>. Contoh:
#include <stdio.h>
int main() {
printf("Hello World!");
return 0;
}
Tambahkan ini <head >... </head> di template Blogger
<link href="https://cdn.jsdelivr.net/npm/prismjs/themes/prism-okaidia.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/prismjs/prism.js"></script>
<link href="https://cdn.jsdelivr.net/npm/prismjs/plugins/toolbar/prism-toolbar.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/prismjs/plugins/toolbar/prism-toolbar.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/prismjs/plugins/copy-to-clipboard/prism-copy-to-clipboard.min.js"></script>
Tambah juga css style untuk untuk memperindah tampilan
<style>
pre[class*="language-"] {
border-radius: 8px;
padding: 1em;
font-family: 'Fira Code','Consolas','Courier New',monospace;
font-size: 14px;
line-height: 1.5;
}
code[class*="language-"] {
font-family: inherit;
}
</style>
Tambah materi yang akan ditampilkan di postingan artikel mu diantara <pre><code>.... </code></pre>
<pre><code class="language-c">
#include <stdio.h>
int main() {
printf("Hello World!");
return 0;
}
</code></pre>
Maka hasil akan seperti berikut:
#include <stdio.h>
int main() {
printf("Hello World!");
return 0;
}
