On

Notepad++ is one of the best and easiest programs for code editing. If you want to copy code from Notepad++ with syntax highlighting to publish in online articles on HTML, WordPress, or Blogger, follow these exact steps:


  1. Select the Code,
  2. Click right button of Mouse,
  3. Select 'Plugin commands' > 'Copy Text with Syntax Highlighting'
  4. Paste where you want to paste, must be in "Compose View".


 

Rules for Compose Mode and HTML Editing Mode

If you copy any code from Notepad++ like this.

<p>Hi, I am a sentence.</p>
<p>Hi, I am another sentence.</p>

and when you paste in Compose View. After that, in HTML Editor, you will see something like this: 

<div style="background: #FFFFFF; float: left; line-height: 1; white-space: pre;"><span class="sc1">&lt;p&gt;</span><span class="sc0">Hi, I am a sentence.</span><span class="sc1">&lt;/p&gt;</span><span class="sc0">
</span><span class="sc1">&lt;p&gt;</span><span class="sc0">Hi, I am another sentence.</span><span class="sc1">&lt;/p&gt;</span></div>

<style type="text/css">
span {
    font-family: 'Tahoma';
    font-size: 14pt;
    color: #000000;
}
.sc0 {
    font-weight: bold;
}.sc1 {
    color: #0000FF;
}</style><br />


Change 1: Rewrite white-space rule

white-space: pre is not perfect as the code will go out from the monitor. From HTML/Code Editor, change it to white-space: pre-wrap


If you have already code for <pre> and <code> in your Theme/Template, then you can completely remove the entire <div> part :


<div style="background: #FFFFFF; float: left; line-height: 1; white-space: pre;"> 

 ... 

</div>

 

and add tags 

<pre>

<code> 

... 

</code>

</pre>

 if this is any special code block.



Change 2: From the style-sheet, remove entire this code block:


span {
    font-family: 'Tahoma';
    font-size: 14pt;
    color: #000000;
}

and the code will follow your Website's original style. You are copying the color to avoid hard work to color every single word or line.



Change 3: Remove unnecessary code elements.

Remove extra <br /> or anything else.


<div style="background: #FFFFFF; float: left; line-height: 1; white-space: pre;"> ... </div>

<pre><code> ... </code></pre><br />