General Question about Plugin Creation

[Mands]

I just wondered if someone could let me know from their point of view, how easy it could be for someone like me who isn't plugin/code creative savvy to turn the following into a plugin? By that, I mean me creating it... I've never dabbled with codes etc., in my life before. However, this highlight code function I found very useful on V4 because of my arthritis. I only have 5 codes on my site but three of them I use almost on a daily basis. Now Eton Bones did create what he calls a Syntax Highlighter - but when it's enabled I feel that it's lagging the site somewhat. I also find that my site banner/logo area stretches out to the full site width every time a I turn a page before it settles down to the forum width of 700px approx, probably due to the sidebar plugin that I have. Although I was told that would no longer happen with V5 as I had manually changed it myself, but anyway.  So could I change this into a plugin easily or a code that could go into the headers/footers - so that I could start having my codes in a textarea hightlightable box again. I haven't asked about this in the plugin area for the simple reason I don't typically create plugins or codes and didn't want to be hit with a lot of information that could baffle me. I just want from someone's point of view if I could easily modify it or not. I am in desperate need for my V4 style highlight code to be returned thanks.



<!--Code Box Modification-->
<style type="text/css">
.codeArea { border: 1px; }
</style>

<script type="text/javascript">
/* Code Tag Modification by hpmad
Do not repost or claim as your own without permission
This header must remain intact */

var table = document.getElementsByTagName('table');
if(location.href.match(/action=(display|recent|pmview|search2)/i)){
   for(i=0;i<table.length;i++){
      if(table.className=='code'){
         var codeArea = table.firstChild.firstChild.firstChild.firstChild.innerHTML;
         codeArea = codeArea.replace(/&nb+sp;/gi,' ');
         codeArea = codeArea.replace(/&a+mp;/gi,'&');
   codeArea = codeArea.replace(/\t/gi,'&nb+sp;&nb+sp; ')
         codeArea = codeArea.replace(/<br\s?\/?>/gi,'\n');
         table.parentNode.parentNode.parentNode.parentNode.parentNode.innerHTML
= '<font
size="1"><b>Code:</b></font><br><center><form><textarea
class="codeArea" style="font-size: 8pt;" readonly name="codeArea"
cols="50" rows="5">'+codeArea+'</textarea><br><input
type="button" value="Highlight Code"
onclick="javascript:this.form.codeArea.focus();this.form.codeArea.select();"></form></center>';
         i--;
      }
   }
}
</script>
<!--End Code Box Modification-->

[Mands]

This had been posted in the general V5 discussion area but someone has obviously deemed it fit for this section. In this case it is sort of a duplication of the following thread I will link to. There is a difference. In the thread I have added, it was a REQUEST which was attempted by Eton Bones but not really what I'm after.  This topic is more me looking for guidance in how to turn the clode from V4 above into a workable plugin or headers/footers code for V5 thanks. I know I might be coming over as somewhat pushy and I'm sorry for that, but my disability really limits me for things a lot of people take for granted, manually highlighting being one of them. So getting this code recreated from V4's would be amazing and the only other thing I need for my site. Thanks again. Plus going by the request thread, Eton Bones attempt aside, I was seeing many newer requests being dealt with before mine.

support.proboards.com/thread/441082/plug-request-highlightable-code-function