PBS Script Generator: Interdependent dropdown/select menus in Javascript

Recently, I made my foray onto Javascript. I wanted to write a script in javascript to generate a pbs script generator for users based on their selection criteria for running batch jobs on compute nodes on clusters. To make it possible I needed to understand how to create interdependent drop-down/select menus. They contain options for selecting number of nodes, memory per each node, processor per node, and walltime, etc. Overall, I loved learning little bit of javascript. Hopefully, I should make more progress and use it for making some good stuff in the future.

This code contains small styling in css, major block of javascript and a block of HTML. I'll explain the code in my next post. By the way, if you scroll all the way down on this page you can see this PBS Script Generator in action as a widget.

For NetID: Start with an alphabet and then end with some number. Eg. xx2000
Job Name: Start with an alphabet. You can end either with an alphabet or number. It can contain either dash or underscore in the middle. Eg. pbs_job

<style type="text/css">
  .div_style
  {
    margin-left:auto;
    margin-right:auto;
    margin-top:1em;
    text-align:left;
    width:290px;
  }
  table {table-collapse:collapse; border-spacing:0; width:450px; margin:auto; margin-top:20px;}
  td {border:2px groove black;padding:7px;background-color:#ccffcc;font-size:small;font-style:italic;}
  th {border:2px groove black; padding:7px; background-color:#ffffcc; text-align:center;}
</style>

<script type="text/javascript">
  // Table data -- an array of objects
  var jsData = new Array();
 
  function setStyle(x) {
   document.getElementById(x).style.background = "yellow";
   document.getElementById(x).select();
   if (document.getElementById(x).value.split(":")[0] == "SRE NetID" 
|| document.getElementById(x).value.split(":")[0] == "Job Name") {
    document.getElementById(x).value = document.getElementById(x).value.split(" ")[2];
    document.getElementById(x).select();
   }
  }
 
  function grab_netid() {
   netid = document.getElementById('netid_input').value;
   if (netid.match(/^[a-z]{1,9}[0-9]{1,4}$/) != netid) {
    alert("Invalid SRE NetID!");
    return false;
   }
   document.getElementById('netid_input').style.color = "black";
   document.getElementById('netid_input').style.fontWeight = "bold";
   document.getElementById('netid_input').value = "SRE NetID: " + netid;
  }
 
  function grab_jobname() {
   jobname = document.getElementById('jobname_input').value;
   //jobname=document.forms["myForm"]["jobname"].value;
   if (jobname.match(/^[a-zA-Z]{1}[a-zA-Z0-9-_.]{0,13}[a-zA-Z0-9]{1}$/) != jobname) {
    alert("Invalid job name! The name specified may be up to and including" + "\n" 
+ "    15 characters in length. First and last characters should be" + "\n" 
+ "         alphabetic and others can be alphanumeric,.,- and _.");
    return false;
   }
   document.getElementById('jobname_input').style.color = "black";
   document.getElementById('jobname_input').style.fontWeight = "bold";
   document.getElementById('jobname_input').value = "Job Name: " + jobname;
  }
 
  function select_shell() {
   if (document.getElementById('sh_shell').checked == true) {
    pbs_shell_top = "#!/bin/bash";
    pbs_shell_bottom = "#PBS -S /bin/bash";
    pbs_module = "source /etc/profile.d/env-modules.sh"
   } else { // if (document.getElementById('csh_shell').checked == true)
    pbs_shell_top = "#!/bin/csh -f";
    pbs_shell_bottom = "#PBS -S /bin/tcsh";
    pbs_module = "source /etc/profile.d/env-modules.csh"
   }
  }
 
  function select_email() {
   pbs_email = "<br>" + "#PBS -M " + netid + "@SRE.edu" 
+ "<br>" + "#PBS -m ";
   var selectedEmail = document.forms["myForm"].elements["email"];
   for (var i = 0; i < selectedEmail.length; i++) {
    if (selectedEmail[i].checked && i == 0) pbs_email += "b";
    else if (selectedEmail[i].checked && i == 1) pbs_email += "e";
    else if (selectedEmail[i].checked && i == 2) pbs_email += "a";
   }
   if (pbs_email == "<br>" + "#PBS -M " + netid + "@SRE.edu" 
+ "<br>" + "#PBS -m ") 
       pbs_email = "";
  }
 
  function loadSelectElement(selObjId, options) {
   var selObj = document.getElementById(selObjId);
   selObj.style.width = "290px";
 
   // clear the target select element apart from the "select your..." option
   selObj.options.length = 1;
 
   // copy options from array of [value, pair] arrays to select box
   // IE doesn't work if you use the DOM-standard method, however...
   if (typeof(window.clientInformation) != 'undefined') {
    // IE doesn't take the second "before" parameter...
    for (var loop = 0; loop < options.length; loop++)
        selObj.add(new Option(options[loop][1], options[loop][0]));
   } else {
    for (var loop = 0; loop < options.length; loop++)
        selObj.add(new Option(options[loop][1], options[loop][0]), null);
   }
  }
 
  function madeSelection(selObj) {
   if (selObj.name != 'selectedshell' && selObj.name != 'email') {
    var selectedValue = selObj.options[selObj.selectedIndex].value;
    var selectedText = selObj.options[selObj.selectedIndex].text;
    if (selectedValue == '--') return;
   }
   select_shell();
   if (selObj.name != 'selectedshell') {
    netid = document.getElementById('netid_input').value;
 
    if (netid.split(":")[0] == "SRE NetID")
        netid = netid.split(" ")[2];
 
    if (netid.match(/^[a-z]{1,9}[0-9]{1,4}$/) != netid) {
     alert("Invalid SRE NetID!");
     return false;
    }
    jobname = document.getElementById('jobname_input').value;
 
    if (jobname.split(":")[0] == "Job Name")
        jobname = jobname.split(" ")[2];
    if (jobname.match(/^[a-zA-Z]{1}[a-zA-Z0-9-_.]{0,13}[a-zA-Z0-9]{1}$/) != jobname) {
     alert("Invalid job name! The name specified may be up to and including" + "\n" 
+ "    15 characters in length. First and last characters should be" + "\n" 
+ "         alphabetic and others can be alphanumeric,.,- and _.");
     return false;
    }
   }
 
   select_email();
 
   if (selObj.name == 'select01') {
    selObj.onclick = toggle_display(document.getElementById('select03Container'));
    selObj.onclick = toggle_display(document.getElementById('select04Container'));
    selObj.onclick = toggle_display(document.getElementById('select05Container'));
    toggle_display(document.getElementById('pbsscript'));
    toggle_display(document.getElementById('pbs_table'));
    document.getElementById('select02Container').style.display = 'block';
    document.getElementById('select02').options[0].text = 'Select Memory';
    selectedJobType = selectedValue;
 
    switch (selectedValue) {
    case 'type_parallel':
     loadSelectElement('select02', [
      ['type_1gb', '1 GB'],
      ['type_2gb', '2 GB'],
      ['type_3gb', '3 GB'],
      ['type_4gb', '4 GB'],
      ['type_5gb', '5 GB'],
      ['type_6gb', '6 GB'],
      ['type_7gb', '7 GB'],
      ['type_8gb', '8 GB'],
      ['type_9gb', '9 GB'],
      ['type_10gb', '10 GB'],
      ['type_11gb', '11 GB'],
      ['type_12gb', '12 GB'],
      ['type_13gb', '13 GB'],
      ['type_14gb', '14 GB'],
      ['type_15gb', '15 GB'],
      ['type_16gb', '16 GB'],
      ['type_17gb', '17 GB'],
      ['type_18gb', '18 GB'],
      ['type_19gb', '19 GB'],
      ['type_20gb', '20 GB'],
      ['type_21gb', '21 GB'],
      ['type_22gb', '22 GB'],
      ['type_23gb', '23 GB'],
      ['type_24gb', '24 GB'],
      ['type_25gb', '25 GB'],
      ['type_26gb', '26 GB'],
      ['type_27gb', '27 GB'],
      ['type_28gb', '28 GB'],
      ['type_29gb', '29 GB'],
      ['type_30gb', '30 GB'],
      ['type_31gb', '31 GB'],
      ['type_32gb', '32 GB'],
      ['type_33gb', '33 GB'],
      ['type_34gb', '34 GB'],
      ['type_35gb', '35 GB'],
      ['type_36gb', '36 GB'],
      ['type_37gb', '37 GB'],
      ['type_38gb', '38 GB'],
      ['type_39gb', '39 GB'],
      ['type_40gb', '40 GB'],
      ['type_41gb', '41 GB'],
      ['type_42gb', '42 GB'],
      ['type_43gb', '43 GB'],
      ['type_44gb', '44 GB'],
      ['type_45gb', '45 GB'],
      ['type_46gb', '46 GB'],
      ['type_47gb', '47 GB'],
      ['type_48gb', '48 GB'],
      ['type_49gb', '49 GB'],
      ['type_50gb', '50 GB'],
      ['type_51gb', '51 GB'],
      ['type_52gb', '52 GB'],
      ['type_53gb', '53 GB'],
      ['type_54gb', '54 GB'],
      ['type_55gb', '55 GB'],
      ['type_56gb', '56 GB'],
      ['type_57gb', '57 GB'],
      ['type_58gb', '58 GB'],
      ['type_59gb', '59 GB'],
      ['type_60gb', '60 GB'],
      ['type_61gb', '61 GB'],
      ['type_62gb', '62 GB'],
      ['type_63gb', '63 GB'],
      ['type_64gb', '64 GB'],
      ['type_65gb', '65 GB'],
      ['type_66gb', '66 GB'],
      ['type_67gb', '67 GB'],
      ['type_68gb', '68 GB'],
      ['type_69gb', '69 GB'],
      ['type_70gb', '70 GB'],
      ['type_71gb', '71 GB'],
      ['type_72gb', '72 GB'],
      ['type_73gb', '73 GB'],
      ['type_74gb', '74 GB'],
      ['type_75gb', '75 GB'],
      ['type_76gb', '76 GB'],
      ['type_77gb', '77 GB'],
      ['type_78gb', '78 GB'],
      ['type_79gb', '79 GB'],
      ['type_80gb', '80 GB'],
      ['type_81gb', '81 GB'],
      ['type_82gb', '82 GB'],
      ['type_83gb', '83 GB'],
      ['type_84gb', '84 GB'],
      ['type_85gb', '85 GB'],
      ['type_86gb', '86 GB'],
      ['type_87gb', '87 GB'],
      ['type_88gb', '88 GB'],
      ['type_89gb', '89 GB'],
      ['type_90gb', '90 GB']
     ]);
     return;
 
    case 'type_serial':
     loadSelectElement('select02', [
      ['type_20gb', '20 GB'],
      ['type_21gb', '21 GB'],
      ['type_22gb', '22 GB'],
      ['type_23gb', '23 GB'],
      ['type_24gb', '24 GB'],
      ['type_25gb', '25 GB'],
      ['type_26gb', '26 GB'],
      ['type_27gb', '27 GB'],
      ['type_28gb', '28 GB'],
      ['type_29gb', '29 GB'],
      ['type_30gb', '30 GB'],
      ['type_31gb', '31 GB'],
      ['type_32gb', '32 GB'],
      ['type_33gb', '33 GB'],
      ['type_34gb', '34 GB'],
      ['type_35gb', '35 GB'],
      ['type_36gb', '36 GB'],
      ['type_37gb', '37 GB'],
      ['type_38gb', '38 GB'],
      ['type_39gb', '39 GB'],
      ['type_40gb', '40 GB'],
      ['type_41gb', '41 GB'],
      ['type_42gb', '42 GB'],
      ['type_43gb', '43 GB'],
      ['type_44gb', '44 GB'],
      ['type_45gb', '45 GB'],
      ['type_46gb', '46 GB'],
      ['type_47gb', '47 GB'],
      ['type_48gb', '48 GB'],
      ['type_49gb', '49 GB'],
      ['type_50gb', '50 GB'],
      ['type_51gb', '51 GB'],
      ['type_52gb', '52 GB'],
      ['type_53gb', '53 GB'],
      ['type_54gb', '54 GB'],
      ['type_55gb', '55 GB'],
      ['type_56gb', '56 GB'],
      ['type_57gb', '57 GB'],
      ['type_58gb', '58 GB'],
      ['type_59gb', '59 GB'],
      ['type_60gb', '60 GB'],
      ['type_61gb', '61 GB'],
      ['type_62gb', '62 GB'],
      ['type_63gb', '63 GB'],
      ['type_64gb', '64 GB'],
      ['type_65gb', '65 GB'],
      ['type_66gb', '66 GB'],
      ['type_67gb', '67 GB'],
      ['type_68gb', '68 GB'],
      ['type_69gb', '69 GB'],
      ['type_70gb', '70 GB'],
      ['type_71gb', '71 GB'],
      ['type_72gb', '72 GB'],
      ['type_73gb', '73 GB'],
      ['type_74gb', '74 GB'],
      ['type_75gb', '75 GB'],
      ['type_76gb', '76 GB'],
      ['type_77gb', '77 GB'],
      ['type_78gb', '78 GB'],
      ['type_79gb', '79 GB'],
      ['type_80gb', '80 GB'],
      ['type_81gb', '81 GB'],
      ['type_82gb', '82 GB'],
      ['type_83gb', '83 GB'],
      ['type_84gb', '84 GB'],
      ['type_85gb', '85 GB'],
      ['type_86gb', '86 GB'],
      ['type_87gb', '87 GB'],
      ['type_88gb', '88 GB'],
      ['type_89gb', '89 GB'],
      ['type_90gb', '90 GB'],
      ['type_91gb', '91 GB'],
      ['type_92gb', '92 GB'],
      ['type_93gb', '93 GB'],
      ['type_94gb', '94 GB'],
      ['type_95gb', '95 GB'],
      ['type_96gb', '96 GB'],
      ['type_97gb', '97 GB'],
      ['type_98gb', '98 GB'],
      ['type_99gb', '99 GB'],
      ['type_100gb', '100 GB'],
      ['type_101gb', '101 GB'],
      ['type_102gb', '102 GB'],
      ['type_103gb', '103 GB'],
      ['type_104gb', '104 GB'],
      ['type_105gb', '105 GB'],
      ['type_106gb', '106 GB'],
      ['type_107gb', '107 GB'],
      ['type_108gb', '108 GB'],
      ['type_109gb', '109 GB'],
      ['type_110gb', '110 GB'],
      ['type_111gb', '111 GB'],
      ['type_112gb', '112 GB'],
      ['type_113gb', '113 GB'],
      ['type_114gb', '114 GB'],
      ['type_115gb', '115 GB'],
      ['type_116gb', '116 GB'],
      ['type_117gb', '117 GB'],
      ['type_118gb', '118 GB'],
      ['type_119gb', '119 GB'],
      ['type_120gb', '120 GB'],
      ['type_121gb', '121 GB'],
      ['type_122gb', '122 GB'],
      ['type_123gb', '123 GB'],
      ['type_124gb', '124 GB'],
      ['type_125gb', '125 GB'],
      ['type_126gb', '126 GB'],
      ['type_127gb', '127 GB'],
      ['type_128gb', '128 GB'],
      ['type_129gb', '129 GB'],
      ['type_130gb', '130 GB'],
      ['type_131gb', '131 GB'],
      ['type_132gb', '132 GB'],
      ['type_133gb', '133 GB'],
      ['type_134gb', '134 GB'],
      ['type_135gb', '135 GB'],
      ['type_136gb', '136 GB'],
      ['type_137gb', '137 GB'],
      ['type_138gb', '138 GB'],
      ['type_139gb', '139 GB'],
      ['type_140gb', '140 GB'],
      ['type_141gb', '141 GB'],
      ['type_142gb', '142 GB'],
      ['type_143gb', '143 GB'],
      ['type_144gb', '144 GB'],
      ['type_145gb', '145 GB'],
      ['type_146gb', '146 GB'],
      ['type_147gb', '147 GB'],
      ['type_148gb', '148 GB'],
      ['type_149gb', '149 GB'],
      ['type_150gb', '150 GB'],
      ['type_151gb', '151 GB'],
      ['type_152gb', '152 GB'],
      ['type_153gb', '153 GB'],
      ['type_154gb', '154 GB'],
      ['type_155gb', '155 GB'],
      ['type_156gb', '156 GB'],
      ['type_157gb', '157 GB'],
      ['type_158gb', '158 GB'],
      ['type_159gb', '159 GB'],
      ['type_160gb', '160 GB'],
      ['type_161gb', '161 GB'],
      ['type_162gb', '162 GB'],
      ['type_163gb', '163 GB'],
      ['type_164gb', '164 GB'],
      ['type_165gb', '165 GB'],
      ['type_166gb', '166 GB'],
      ['type_167gb', '167 GB'],
      ['type_168gb', '168 GB'],
      ['type_169gb', '169 GB'],
      ['type_170gb', '170 GB'],
      ['type_171gb', '171 GB'],
      ['type_172gb', '172 GB'],
      ['type_173gb', '173 GB'],
      ['type_174gb', '174 GB'],
      ['type_175gb', '175 GB'],
      ['type_176gb', '176 GB'],
      ['type_177gb', '177 GB'],
      ['type_178gb', '178 GB'],
      ['type_179gb', '179 GB'],
      ['type_180gb', '180 GB'],
      ['type_181gb', '181 GB'],
      ['type_182gb', '182 GB'],
      ['type_183gb', '183 GB'],
      ['type_184gb', '184 GB'],
      ['type_185gb', '185 GB'],
      ['type_186gb', '186 GB'],
      ['type_187gb', '187 GB'],
      ['type_188gb', '188 GB'],
      ['type_189gb', '189 GB'],
      ['type_190gb', '190 GB'],
      ['type_191gb', '191 GB'],
      ['type_192gb', '192 GB'],
      ['type_193gb', '193 GB'],
      ['type_194gb', '194 GB'],
      ['type_195gb', '195 GB'],
      ['type_196gb', '196 GB'],
      ['type_197gb', '197 GB'],
      ['type_198gb', '198 GB'],
      ['type_199gb', '199 GB'],
      ['type_200gb', '200 GB'],
      ['type_201gb', '201 GB'],
      ['type_202gb', '202 GB'],
      ['type_203gb', '203 GB'],
      ['type_204gb', '204 GB'],
      ['type_205gb', '205 GB'],
      ['type_206gb', '206 GB'],
      ['type_207gb', '207 GB'],
      ['type_208gb', '208 GB'],
      ['type_209gb', '209 GB'],
      ['type_210gb', '210 GB'],
      ['type_211gb', '211 GB'],
      ['type_212gb', '212 GB'],
      ['type_213gb', '213 GB'],
      ['type_214gb', '214 GB'],
      ['type_215gb', '215 GB'],
      ['type_216gb', '216 GB'],
      ['type_217gb', '217 GB'],
      ['type_218gb', '218 GB'],
      ['type_219gb', '219 GB'],
      ['type_220gb', '220 GB'],
      ['type_221gb', '221 GB'],
      ['type_222gb', '222 GB'],
      ['type_223gb', '223 GB'],
      ['type_224gb', '224 GB'],
      ['type_225gb', '225 GB'],
      ['type_226gb', '226 GB'],
      ['type_227gb', '227 GB'],
      ['type_228gb', '228 GB'],
      ['type_229gb', '229 GB'],
      ['type_230gb', '230 GB'],
      ['type_231gb', '231 GB'],
      ['type_232gb', '232 GB'],
      ['type_233gb', '233 GB'],
      ['type_234gb', '234 GB'],
      ['type_235gb', '235 GB'],
      ['type_236gb', '236 GB'],
      ['type_237gb', '237 GB'],
      ['type_238gb', '238 GB'],
      ['type_239gb', '239 GB'],
      ['type_240gb', '240 GB'],
      ['type_241gb', '241 GB'],
      ['type_242gb', '242 GB'],
      ['type_243gb', '243 GB'],
      ['type_244gb', '244 GB']
     ]);
     return;
    }
   } // select01
   if (selObj.name == 'select02') {
    selObj.onclick = toggle_display(document.getElementById('select04Container'));
    selObj.onclick = toggle_display(document.getElementById('select05Container'));
    toggle_display(document.getElementById('pbsscript'));
    toggle_display(document.getElementById('pbs_table'));
    document.getElementById('select03Container').style.display = 'block';
    document.getElementById('select03').options[0].text = 'Select No. of Nodes';
    selectedMemory = selectedText;
 
    if (selectedJobType == 'type_parallel') {
     if (selectedText.split(" ")[0] <= 22) {
      loadSelectElement('select03', [
       ['type_2nodes', '2'],
       ['type_3nodes', '3'],
       ['type_4nodes', '4'],
       ['type_5nodes', '5'],
       ['type_6nodes', '6'],
       ['type_7nodes', '7'],
       ['type_8nodes', '8'],
       ['type_9nodes', '9'],
       ['type_10nodes', '10'],
       ['type_11nodes', '11'],
       ['type_12nodes', '12'],
       ['type_13nodes', '13'],
       ['type_14nodes', '14'],
       ['type_15nodes', '15'],
       ['type_16nodes', '16'],
       ['type_17nodes', '17'],
       ['type_18nodes', '18'],
       ['type_19nodes', '19'],
       ['type_20nodes', '20'],
       ['type_21nodes', '21'],
       ['type_22nodes', '22'],
       ['type_23nodes', '23'],
       ['type_24nodes', '24'],
       ['type_25nodes', '25'],
       ['type_26nodes', '26'],
       ['type_27nodes', '27'],
       ['type_28nodes', '28'],
       ['type_29nodes', '29'],
       ['type_30nodes', '30'],
       ['type_31nodes', '31'],
       ['type_32nodes', '32'],
       ['type_33nodes', '33'],
       ['type_34nodes', '34'],
       ['type_35nodes', '35'],
       ['type_36nodes', '36'],
       ['type_37nodes', '37'],
       ['type_38nodes', '38'],
       ['type_39nodes', '39'],
       ['type_40nodes', '40'],
       ['type_41nodes', '41'],
       ['type_42nodes', '42'],
       ['type_43nodes', '43'],
       ['type_44nodes', '44'],
       ['type_45nodes', '45'],
       ['type_46nodes', '46'],
       ['type_47nodes', '47'],
       ['type_48nodes', '48'],
       ['type_49nodes', '49'],
       ['type_50nodes', '50'],
       ['type_51nodes', '51'],
       ['type_52nodes', '52'],
       ['type_53nodes', '53'],
       ['type_54nodes', '54'],
       ['type_55nodes', '55'],
       ['type_56nodes', '56'],
       ['type_57nodes', '57'],
       ['type_58nodes', '58'],
       ['type_59nodes', '59'],
       ['type_60nodes', '60'],
       ['type_61nodes', '61'],
       ['type_62nodes', '62'],
       ['type_63nodes', '63'],
       ['type_64nodes', '64'],
       ['type_65nodes', '65'],
       ['type_66nodes', '66'],
       ['type_67nodes', '67'],
       ['type_68nodes', '68'],
       ['type_69nodes', '69'],
       ['type_70nodes', '70'],
       ['type_71nodes', '71'],
       ['type_72nodes', '72']
      ]);
      return;
     } else if (selectedText.split(" ")[0] >= 23 && selectedText.split(" ")[0] <= 42) {
      loadSelectElement('select03', [
       ['type_2nodes', '2'],
       ['type_3nodes', '3'],
       ['type_4nodes', '4'],
       ['type_5nodes', '5'],
       ['type_6nodes', '6'],
       ['type_7nodes', '7'],
       ['type_8nodes', '8'],
       ['type_9nodes', '9'],
       ['type_10nodes', '10'],
       ['type_11nodes', '11'],
       ['type_12nodes', '12'],
       ['type_13nodes', '13'],
       ['type_14nodes', '14'],
       ['type_15nodes', '15'],
       ['type_16nodes', '16'],
       ['type_17nodes', '17'],
       ['type_18nodes', '18'],
       ['type_19nodes', '19'],
       ['type_20nodes', '20'],
       ['type_21nodes', '21'],
       ['type_22nodes', '22'],
       ['type_23nodes', '23'],
       ['type_24nodes', '24'],
       ['type_25nodes', '25'],
       ['type_26nodes', '26']
      ]);
      return;
     } else {
      loadSelectElement('select03', [
       ['type_2nodes', '2'],
       ['type_3nodes', '3'],
       ['type_4nodes', '4'],
       ['type_5nodes', '5'],
       ['type_6nodes', '6'],
       ['type_7nodes', '7'],
       ['type_8nodes', '8'],
       ['type_9nodes', '9'],
       ['type_10nodes', '10'],
       ['type_11nodes', '11'],
       ['type_12nodes', '12'],
       ['type_13nodes', '13'],
       ['type_14nodes', '14'],
       ['type_15nodes', '15'],
       ['type_16nodes', '16'],
       ['type_17nodes', '17']
      ]);
      return;
     }
    } else {
     document.getElementById('select03').options[0].text = 'Select No. of Processors Per Node (ppn)';
     loadSelectElement('select03', [
      ['type_1ppn', '1'],
      ['type_2ppn', '2'],
      ['type_3ppn', '3'],
      ['type_4ppn', '4'],
      ['type_5ppn', '5'],
      ['type_6ppn', '6'],
      ['type_7ppn', '7'],
      ['type_8ppn', '8'],
      ['type_9ppn', '9'],
      ['type_10ppn', '10'],
      ['type_11ppn', '11'],
      ['type_12ppn', '12'],
      ['type_13ppn', '13'],
      ['type_14ppn', '14'],
      ['type_15ppn', '15'],
      ['type_16ppn', '16']
     ]);
     return;
    }
   } // select02
   if (selObj.name == 'select03') {
    selObj.onclick = toggle_display(document.getElementById('select05Container'));
    toggle_display(document.getElementById('pbsscript'));
    toggle_display(document.getElementById('pbs_table'));
    document.getElementById('select04Container').style.display = 'block';
    document.getElementById('select04').options[0].text = 'Select Walltime (Hr)';
 
    if (selectedJobType == 'type_parallel') {
     selectedNodes = selectedText;
    } else {
     selectedPPN = selectedText;
    }
 
    if (selectedJobType == 'type_serial' 
|| (selectedJobType == 'type_parallel' && (selectedMemory.split(" ")[0] < 23 
|| selectedMemory.split(" ")[0] > 42))) {
     loadSelectElement('select04', [
      ['type_walltime1', '1:00:00'],
      ['type_walltime2', '2:00:00'],
      ['type_walltime3', '3:00:00'],
      ['type_walltime4', '4:00:00'],
      ['type_walltime5', '5:00:00'],
      ['type_walltime6', '6:00:00'],
      ['type_walltime7', '7:00:00'],
      ['type_walltime8', '8:00:00'],
      ['type_walltime9', '9:00:00'],
      ['type_walltime10', '10:00:00'],
      ['type_walltime11', '11:00:00'],
      ['type_walltime12', '12:00:00'],
      ['type_walltime13', '13:00:00'],
      ['type_walltime14', '14:00:00'],
      ['type_walltime15', '15:00:00'],
      ['type_walltime16', '16:00:00'],
      ['type_walltime17', '17:00:00'],
      ['type_walltime18', '18:00:00'],
      ['type_walltime19', '19:00:00'],
      ['type_walltime20', '20:00:00'],
      ['type_walltime21', '21:00:00'],
      ['type_walltime22', '22:00:00'],
      ['type_walltime23', '23:00:00'],
      ['type_walltime24', '24:00:00'],
      ['type_walltime25', '25:00:00'],
      ['type_walltime26', '26:00:00'],
      ['type_walltime27', '27:00:00'],
      ['type_walltime28', '28:00:00'],
      ['type_walltime29', '29:00:00'],
      ['type_walltime30', '30:00:00'],
      ['type_walltime31', '31:00:00'],
      ['type_walltime32', '32:00:00'],
      ['type_walltime33', '33:00:00'],
      ['type_walltime34', '34:00:00'],
      ['type_walltime35', '35:00:00'],
      ['type_walltime36', '36:00:00'],
      ['type_walltime37', '37:00:00'],
      ['type_walltime38', '38:00:00'],
      ['type_walltime39', '39:00:00'],
      ['type_walltime40', '40:00:00'],
      ['type_walltime41', '41:00:00'],
      ['type_walltime42', '42:00:00'],
      ['type_walltime43', '43:00:00'],
      ['type_walltime44', '44:00:00'],
      ['type_walltime45', '45:00:00'],
      ['type_walltime46', '46:00:00'],
      ['type_walltime47', '47:00:00'],
      ['type_walltime48', '48:00:00']
     ]);
     return;
    } else {
     loadSelectElement('select04', [
      ['type_walltime1', '1:00:00'],
      ['type_walltime2', '2:00:00'],
      ['type_walltime3', '3:00:00'],
      ['type_walltime4', '4:00:00'],
      ['type_walltime5', '5:00:00'],
      ['type_walltime6', '6:00:00'],
      ['type_walltime7', '7:00:00'],
      ['type_walltime8', '8:00:00'],
      ['type_walltime9', '9:00:00'],
      ['type_walltime10', '10:00:00'],
      ['type_walltime11', '11:00:00'],
      ['type_walltime12', '12:00:00']
     ]);
     return;
    }
   } // select03
   if (selObj.name == 'select04') {
    selectedWalltime = selectedText;
    toggle_display(document.getElementById('pbsscript'));
    toggle_display(document.getElementById('pbs_table'));
 
    if (selectedJobType == 'type_parallel') {
     document.getElementById('select05Container').style.display = 'block';
     document.getElementById('select05').options[0].text = 'Select No. of Processors Per Node (ppn)';
 
     if (selectedText.split(":")[0] <= 12 
|| selectedMemory.split(" ")[0] > 42) {
      loadSelectElement('select05', [
       ['type_1ppn', '1'],
       ['type_2ppn', '2'],
       ['type_3ppn', '3'],
       ['type_4ppn', '4'],
       ['type_5ppn', '5'],
       ['type_6ppn', '6'],
       ['type_7ppn', '7'],
       ['type_8ppn', '8'],
       ['type_9ppn', '9'],
       ['type_10ppn', '10'],
       ['type_11ppn', '11'],
       ['type_12ppn', '12']
      ]);
      return;
     } else {
      loadSelectElement('select05', [
       ['type_1ppn', '1'],
       ['type_2ppn', '2'],
       ['type_3ppn', '3'],
       ['type_4ppn', '4'],
       ['type_5ppn', '5'],
       ['type_6ppn', '6'],
       ['type_7ppn', '7'],
       ['type_8ppn', '8']
      ]);
      return;
     }
    }
   } //select04
   if (selObj.name == 'select05') {
    selectedPPN = selectedText;
   } //select05
   document.getElementById('pbsscript').style.display = 'none';
 
   if (selectedJobType == 'type_serial') {
    document.getElementById('pbsscript').innerHTML = pbs_shell_top + "<br><br>" 
+ "#PBS -V" + "<br>" + pbs_shell_bottom + "<br>" 
+ "#PBS -N " + jobname + "<br>" + "#PBS -l nodes=1:ppn=" + selectedPPN 
+ ",walltime=" + selectedWalltime + "<br>" + "#PBS -l mem=" 
+ selectedMemory.split(" ")[0] + "GB" + "<br>" 
+ "#PBS -q bigmem" + pbs_email + "<br>" + "#PBS -e localhost:/scratch/" 
+ netid + "/${PBS_JOBNAME}.e${PBS_JOBID}" + "<br>" 
+ "#PBS -o localhost:/scratch/" + netid + "/${PBS_JOBNAME}.o${PBS_JOBID}" 
+ "<br><br>" + pbs_module + "<br><br>" + "exit 0;";
   } else {
    document.getElementById('pbsscript').innerHTML = pbs_shell_top + "<br><br>" 
+ "#PBS -V" + "<br>" + pbs_shell_bottom + "<br>" 
+ "#PBS -N " + jobname + "<br>" + "#PBS -l nodes=" + selectedNodes 
+ ":ppn=" + selectedPPN + ",walltime=" + selectedWalltime;
    document.getElementById('pbsscript').innerHTML += "<br>" + "#PBS -l mem=" 
+ selectedMemory.split(" ")[0] + "GB";
    if (selectedMemory.split(" ")[0] <= 22) {
     if (selectedWalltime.split(":")[0] <= 12) {
      if (selectedPPN <= 8) {
       document.getElementById('pbsscript').innerHTML += "<br>" + "#PBS -q p48" 
+ pbs_email + "<br>" + "#PBS -e localhost:/scratch/" + netid 
+ "/${PBS_JOBNAME}.e${PBS_JOBID}" + "<br>" + "#PBS -o localhost:/scratch/" 
+ netid + "/${PBS_JOBNAME}.o${PBS_JOBID}" + "<br><br>" + pbs_module 
+ "<br><br>" + "exit 0;";
 
      } else {
       document.getElementById('pbsscript').innerHTML += "<br>" + "#PBS -q p12" 
+ pbs_email + "<br>" + "#PBS -e localhost:/scratch/" + netid 
+ "/${PBS_JOBNAME}.e${PBS_JOBID}" + "<br>" + "#PBS -o localhost:/scratch/" 
+ netid + "/${PBS_JOBNAME}.o${PBS_JOBID}" + "<br><br>" + pbs_module 
+ "<br><br>" + "exit 0;";
      }
     } else {
      document.getElementById('pbsscript').innerHTML += "<br>" + "#PBS -q p48" 
+ pbs_email + "<br>" + "#PBS -e localhost:/scratch/" + netid 
+ "/${PBS_JOBNAME}.e${PBS_JOBID}" + "<br>" + "#PBS -o localhost:/scratch/" 
+ netid + "/${PBS_JOBNAME}.o${PBS_JOBID}" + "<br><br>" + pbs_module 
+ "<br><br>" + "exit 0;";
     }
    } else if (selectedMemory.split(" ")[0] > 22 && selectedMemory.split(" ")[0] <= 42) {
     document.getElementById('pbsscript').innerHTML += "<br>" + "#PBS -q p12" 
+ pbs_email + "<br>" + "#PBS -e localhost:/scratch/" + netid 
+ "/${PBS_JOBNAME}.e${PBS_JOBID}" + "<br>" + "#PBS -o localhost:/scratch/" 
+ netid + "/${PBS_JOBNAME}.o${PBS_JOBID}" + "<br><br>" + pbs_module 
+ "<br><br>" + "exit 0;";
    } else {
     document.getElementById('pbsscript').innerHTML += "<br>" + "#PBS -q bigmem" 
+ pbs_email + "<br>" + "#PBS -e localhost:/scratch/" + netid 
+ "/${PBS_JOBNAME}.e${PBS_JOBID}" + "<br>" + "#PBS -o localhost:/scratch/" 
+ netid + "/${PBS_JOBNAME}.o${PBS_JOBID}" + "<br><br>" + pbs_module 
+ "<br><br>" + "exit 0;";
    }
 
   }
   var pbs_code = document.getElementById('pbsscript').innerHTML;
   jsData[0] = {
    location: pbs_code
   };
   document.getElementById('pbs_table').style.display = '';
   drawTable('matchData');
  }
 
  // Draw table from 'jsData' array of objects
  function drawTable(tbody) {
   var tr, td;
   tbody = document.getElementById(tbody);
   // remove existing rows, if any
   clearTable(tbody);
   // loop through data source
   for (var i = 0; i < jsData.length; i++) {
    tr = tbody.insertRow(tbody.rows.length);
    td = tr.insertCell(tr.cells.length);
    //td.setAttribute("align", "center");
    td.innerHTML = jsData[i].location;
   }
  }
 
  // Remove existing table rows
  function clearTable(tbody) {
   while (tbody.rows.length > 0) {
    tbody.deleteRow(0);
   }
  }
 
  function toggle_display(obj) {
   if (obj.style.display != 'none') {
    obj.style.display = 'none';
   }
   return;
  }
 </script>    

<FORM name="myForm">
  <TABLE style="width: 300px;">
    <THEAD>
      <TR>
        <TH style="font-size:120%; padding:12px;">PBS SCRIPT GENERATOR</TH>
      </TR>
    </THEAD>
  </TABLE>
  <DIV class="div_style" id="shell_container" style="margin-top:20px">
    <LABEL>Select a Shell</LABEL>
    <INPUT checked="checked" id="sh_shell" name="selectedshell" onclick="madeSelection(this)" type="radio" value="sh">
    </INPUT>
    SH/BASH
    <INPUT id="csh_shell" name="selectedshell" onclick="madeSelection(this)" type="radio" value="csh">
    </INPUT>
    TCSH/CSH </DIV>
  <DIV class="div_style" id="netid_container" style="margin-top:20px">
    <INPUT id="netid_input" name="netid" onfocus="setStyle(this.id)" style="width:217px" type="text" value="Enter your SRE NetID!">
    </INPUT>
    <INPUT onclick="grab_netid();" type="button" value="Submit">
    </INPUT>
  </DIV>
  <DIV class="div_style" id="jobname_container" style="margin-top:20px">
    <INPUT id="jobname_input" name="jobname" onfocus="setStyle(this.id)" style="width:217px" type="text" value="Enter your job name!">
    </INPUT>
    <INPUT onclick="grab_jobname();" type="button" value="Submit">
    </INPUT>
  </DIV>
  <DIV class="div_style" id="email_container" style="margin-top:20px; margin-bottom:20px;">
    <LABEL>Receive Email: </LABEL>
    <INPUT checked="checked" name="email" onclick="madeSelection(this)" type="checkbox" value="begin">
    </INPUT>
    Begin
    <INPUT checked="checked" name="email" onclick="madeSelection(this)" type="checkbox" valueSRE="end">
    </INPUT>
    End
    <INPUT checked="checked" name="email" onclick="madeSelection(this)" type="checkbox" value="abort">
    </INPUT>
    Abort </DIV>
  <DIV class="div_style" id="select01Container" style="display:block;">
    <SELECT id="select01" name="select01" onchange="madeSelection(this);" style="width:290px;">
      <OPTION value="--">Select Job Type</OPTION>
      <OPTION value="type_parallel">Parallel (No. of Nodes >= 2)</OPTION>
      <OPTION value="type_serial">Serial (No. of Nodes = 1)</OPTION>
    </SELECT>
  </DIV>
  <DIV class="div_style" id="select02Container" style="display:none;">
    <SELECT id="select02" name="select02" onchange="madeSelection(this);">
      <OPTION value="--">Select Memory</OPTION>
    </SELECT>
  </DIV>
  <DIV class="div_style" id="select03Container" style="display:none;">
    <SELECT id="select03" name="select03" onchange="madeSelection(this);">
      <OPTION value="--">Select No. of Nodes</OPTION>
    </SELECT>
  </DIV>
  <DIV class="div_style" id="select04Container" style="display:none;">
    <SELECT id="select04" name="select04" onchange="madeSelection(this);">
      <OPTION value="--">Select Processors Per Node (ppn) </OPTION>
    </SELECT>
  </DIV>
  <DIV class="div_style" id="select05Container" style="display:none;">
    <SELECT id="select05" name="select05" onchange="madeSelection(this);">
      <OPTION value="--">Select Walltime (Hr) </OPTION>
    </SELECT>
  </DIV>
  <DIV class="div_style" id="pbsscript"> </DIV>
  <TABLE id="pbs_table" style="display: none;">
    <THEAD>
      <TR>
        <TH>PBS SCRIPT</TH>
      </TR>
    </THEAD>
    <TBODY id="matchData">
    </TBODY>
  </TABLE>
</FORM>

Including mathematics on blog using LaTeX notation: MathJax

If you want to display mathematical equations on your blog you can do that using MathJax Content Delivery Network (CDN). Here is the link: MathJax.

The default math delimiters are \(\$\$...\$\$\), \\([...\)\] for displayed mathematics, and \\((...\)\\()\) for inline mathematics. What it means is you need to keep either \(\$\$\) at the beginning and end of LaTeX notation or \\([\) at the beginning and \] at the end of the same LaTeX notation to display the equation on the page. If I do this with this text, \sqrt{3x-1}+(1+x)^2:

\(\$\$\sqrt{3x-1}+(1+x)^2\$\$\)                         on the page shows up as
$$\sqrt{3x-1}+(1+x)^2$$

\\([\)\sqrt{3x-1}+(1+x)^2\]                         also shows up as
\[\sqrt{3x-1}+(1+x)^2\]

As an example of inline equation, \\((\)\sqrt{3x-1}+(1+x)^2\) shows up as an inline equation, \(\sqrt{3x-1}+(1+x)^2\).

To make it possible, you need to link MathJax by including the below lines in your design html code on your blog. After logging onto your blog, click on Design, Edit HTML and then add the lines either in the head section or before head tag. If you want to keep in side the head tag, use browser search for </head> and insert these lines right before that. Or you can simply place them right before <head>.

<script type="text/javascript"
  src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
</script>

Finally, I'd like to say one more great feature of MathJax. If you right click on the equation on the page, you can see the LaTeX source code for the eqation, which is quite useful in case you are looking at some complicated equation on some other page which was in fact put on the page using MathJax. This way you can see the TeX code. Anyway, hope this helps someone.

Highlighting codes on your blog: Syntax Highlighter

Did you ever want to post some code on your blog and highlight it from the plain text? I did. The simple solution I found is Syntax Highlighter developed by Mr. Alex Gorbatchev. Here is the link to his webpage: Syntax Highlighter.

What you need to do is log on to your blog and click on Design, then Edit HTML. Once you see the html code on the page, just paste the code below above head tag.

<link href='http://alexgorbatchev.com/pub/sh/current/styles/shCore.css' rel='stylesheet' type='text/css'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript'/>
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushBash.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCpp.js' type='text/javascript'/> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js' type='text/javascript'/> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js' type='text/javascript'/> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPerl.js' type='text/javascript'/> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPhp.js' type='text/javascript'/> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPython.js' type='text/javascript'/> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushSql.js' type='text/javascript'/> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushAppleScript.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPlain.js' type='text/javascript'/>
<script language='javascript' type='text/javascript'>
 SyntaxHighlighter.config.bloggerMode = true;
 SyntaxHighlighter.all();
</script>

Now your design html code should look like below. For reference, I have grayed the pasted code out below:

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html b:version='2' class='v2' expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>

<link href='http://alexgorbatchev.com/pub/sh/current/styles/shCore.css' rel='stylesheet' type='text/css'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript'/>
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushBash.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCpp.js' type='text/javascript'/> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js' type='text/javascript'/> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js' type='text/javascript'/> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPerl.js' type='text/javascript'/> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPhp.js' type='text/javascript'/> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPython.js' type='text/javascript'/> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushSql.js' type='text/javascript'/> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushAppleScript.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPlain.js' type='text/javascript'/>
<script language='javascript' type='text/javascript'>
 SyntaxHighlighter.config.bloggerMode = true;
 SyntaxHighlighter.all();
</script>

  <head>
    <meta content='IE=EmulateIE7' http-equiv='X-UA-Compatible'/>
    <b:if cond='data:blog.isMobile'>
      <meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/>

Now it's time to post some html code on our blog. Whatever we did until now lays behind pages and helps load our posts highlighting code, for example in html. In fact, I used Syntax Highlighter to highlight above html codes. Let me show you here how I did it.

We need to use pre tag like shown below. The problem with the syntax highlighter is that all right angle brackets must be HTML escaped, eg all < must be replaced with &lt; This will ensure correct rendering of our code.

<pre class="brush:xml; toolbar:false;">&lt;link href='http://alexgorbatchev.com/pub/sh/current/styles/shCore.css' rel='stylesheet' type='text/css'/&gt;
&lt;script src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript'/&gt;
&lt;link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/&gt;
&lt;script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushBash.js' type='text/javascript'/&gt;
&lt;script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCpp.js' type='text/javascript'/&gt; 
&lt;script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js' type='text/javascript'/&gt; 
&lt;script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js' type='text/javascript'/&gt; 
&lt;script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPerl.js' type='text/javascript'/&gt; 
&lt;script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPhp.js' type='text/javascript'/&gt; 
&lt;script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPython.js' type='text/javascript'/&gt; 
&lt;script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushSql.js' type='text/javascript'/&gt; 
&lt;script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'/&gt;
&lt;script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushAppleScript.js' type='text/javascript'/&gt;
&lt;script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPlain.js' type='text/javascript'/&gt;
&lt;script language='javascript' type='text/javascript'&gt;
 SyntaxHighlighter.config.bloggerMode = true;
 SyntaxHighlighter.all();
&lt;/script&gt;
</pre>

<pre class="brush:xml; toolbar:false;  highlight:[5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22]">
&lt;?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot; ?&gt;
&lt;!DOCTYPE html&gt;
&lt;html b:version='2' class='v2' expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'&gt;

&lt;link href='http://alexgorbatchev.com/pub/sh/current/styles/shCore.css' rel='stylesheet' type='text/css'/&gt;
&lt;script src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript'/&gt;
&lt;link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/&gt;
&lt;script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushBash.js' type='text/javascript'/&gt;
&lt;script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCpp.js' type='text/javascript'/&gt; 
&lt;script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js' type='text/javascript'/&gt; 
&lt;script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js' type='text/javascript'/&gt; 
&lt;script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPerl.js' type='text/javascript'/&gt; 
&lt;script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPhp.js' type='text/javascript'/&gt; 
&lt;script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPython.js' type='text/javascript'/&gt; 
&lt;script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushSql.js' type='text/javascript'/&gt; 
&lt;script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'/&gt;
&lt;script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushAppleScript.js' type='text/javascript'/&gt;
&lt;script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPlain.js' type='text/javascript'/&gt;
&lt;script language='javascript' type='text/javascript'&gt;
 SyntaxHighlighter.config.bloggerMode = true;
 SyntaxHighlighter.all();
&lt;/script&gt;

  &lt;head&gt;
    &lt;meta content='IE=EmulateIE7' http-equiv='X-UA-Compatible'/&gt;
    &lt;b:if cond='data:blog.isMobile'&gt;
      &lt;meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/&gt;
</pre>

After editing html code on your design page if you paste the above two blocks of code on your new post Edit HTML window you can see how your page comes up with the first two blocks on this page. To do this you need to use pre tag like I used above. If you observe I used class attribute with a feature "brush:xml". If you want to post code in C language you need to write "brush:c" or for C++ it should be "brush:cpp", etc. For more languages and language aliases see this page: More Brushes.

Finally, like I mentioned above, you need to escape right angle brackets with &lt;. If you have tonnes of lines in your code, let's say you have big html code, with right chevron, then it's better to look for some tool that automates this job. Otherwise, you might end up hurting your fingers trying to escape all the right chevrons. Just search online for "html encoder" or "html escape", etc. I use this web page: HTML Encoder. Check Alex Gorbatchev web page for more details.

Oho, I forgot to mention one more thing. In my design html page I put javascript pages for Bash, CPP, CSS, Javascript, Perl, PHP, Python, SQL and XML. CPP works for both C++ and C languages. XML works for xml, xhtml, xslt, html, xhtml. If you need more languages check the link I gave above and add the appropriate javascript file link to be loaded. The advantage with these links is that whenever there is new version of syntax highlighter, this page gets that one as the links are always pointed to current version. Hope this helps someone.