[thelist] modified <pre></pre> blocks

Hardacker, Andrew Andrew.Hardacker at Compuware.com
Wed Jul 17 16:00:01 CDT 2002


Jeff,

<snip>
unfortunately your css suggestions don't keep the line numbers from coming
across when copying the code sample.  that's the current showstopper.
</snip>

Arrgh, I just highlighted the text, thinking only the highlighted text would
be copied. Although, on consideration, it makes more sense for the browser
to copy the numbers, which are a legitimate part of the list. In fact,
they're what gives it that ineffable list-ness. IE is probably wrong not to
include them in cut-n-paste.

<snip>
actually entities seem to work.  the trick is to convert them from entities
back to their resulting character just before passing the string as the
argument of the createTextNode() method.
</snip>

Yes, I just thought if you didn't have to create entities in the original
HTML, you might save the conversion to and from and back to.

Anyway, FWIW, here's another version that doesn't use IE-specific DOM
methods (which probably don't work on IE/Mac) and preserves the code
indentation.

    function convertPreBlocks(bPre)
    {
      if(document.getElementsByTagName)
      {
        var baseOL = document.createElement('OL');
        baseOL.className = "pseudoPreOL";
        var baseLI = document.createElement('LI');
        baseLI.className = "pseudoPreLI";

        var currentPreLines, currentPreWrapper, currentPreRow, tn,
currentPre; // (I just like to declare everything)

        var preArray = document.getElementsByTagName('PRE');
        for(var i = 0; i < preArray.length; i++)
        {
          currentPreLines = preArray[i].innerHTML.split('\n');
          preArray[i].innerHTML = "";
          currentPreWrapper = baseOL.cloneNode(true);

          for(var j = 0; j < currentPreLines.length; j++)
          {
            currentPreRow = baseLI.cloneNode(true);
            tn = document.createTextNode(currentPreLines[j].replace(/\r/g,
''));
            currentPreRow.appendChild(tn);

            currentPreWrapper.appendChild(currentPreRow);
          }
          preArray[i].appendChild(currentPreWrapper);
        }
      }
    }

pre {
  padding: 0px;
  margin: 10px 5px 10px 15px;
  overflow: auto;
  width: 95%;
}
.pseudoPreOL {
  list-style-position: outside;
  border: 1px dashed gray;
  margin:0px;
  margin-left:expression("3em"); /* recognized only be IE5+ */

I had to do a lot of work with lists on my family genealogy page. A family
tree is just a list of lists, right? It was extremely painful working
through all the variations in NN4+, N6, IE and Lynx. Sorry I don't have a
solution in hand for this.

Andy







The contents of this e-mail are intended for the named addressee only. It
contains information that may be confidential. Unless you are the named
addressee or an authorized designee, you may not copy or use it, or disclose
it to anyone else. If you received it in error please notify us immediately
and then destroy it.




More information about the thelist mailing list