Menambahkan script code pada blog (menyisipkan desain pada script)

Bagaimana caranya agar bisa menyisipkan baris kode dengan rapi dan terlihat baik.
Agar tampilan script code terlihat lebih fresh seperti ini

console.log('Hello Kamu!');

Cukup salin code di bawah ini :

<div style="background-color: #f3f3f3; padding: 10px; text-align: left;">
'isi kode anda  disini'</div><br />

Setelah disalin , paste (tempel) pada tag html sebelah compose yang ada diblog.

atau tampilan script code ingin seperti ini

Pertama

console.log('Hello Kamu!');

Salin code di bawah ini :

<div style="background-color: #f3f3f3; padding: 10px; text-align: left;">
<pre class="result notranslate" style="background-color: whitesmoke; border-radius: 4px; border: 1px solid rgb(204, 204, 204); box-sizing: inherit; color: #333333; font-family: monospace, monospace; font-size: 15px; line-height: 1.42857; margin-bottom: 10px; overflow: auto; padding: 9.5px; word-break: break-all; word-wrap: break-word;">'isi kode anda disini'</pre>
</div><br />

Kedua

class App extends React.Component {
   render() {
      return (
         <div>
            Hello World!!!         </div>
      );}

Salin code di bawah ini :

<pre style="background-color: #0c1021; color: #f8f8f8; font-family: 'Courier New'; font-size: 9.0pt;"><span style="color: #fbde2d;">class </span>App <span style="color: #fbde2d;">extends </span>React.Component {
   render() {
      <span style="color: #fbde2d;">return </span>(
         &lt;<span style="color: #7f90aa;">div</span>&gt;
            <span style="font-weight: bold;">Hello World!!!</span><span style="font-weight: bold;">         </span>&lt;/<span style="color: #7f90aa;">div</span>&gt;
      );</pre>
<pre style="background-color: #0c1021; color: #f8f8f8; font-family: 'Courier New'; font-size: 9.0pt;">}</pre>
<br />

Itulah beberapa desain script code agar lebih terlihat rapi dan apik