Gå til innhold

CSS til pen visning av kode (utfordring)

Emancipate

Anbefalte innlegg

Emancipate

Emancipate

Skrevet
Skrevet (endret)

Ok, jeg har et problem. Jeg lager et program som leser en tekstfil, og lager en html-file med teksten syntax highlightet. Det er ikke noe problem, problemet kommer når jeg skal lage HTML/CSS for linjenummer. Jeg skjønner ikke hvordan jeg skal få til word wrap riktig.

 

1. Det skal se ca. sånn ut (minus ringene):

nox.png

 

2. VIKTIG: Teksten må word-wrappes til en bredde som vi ikke vet på forhånd (størrelsen på leservinduet). Der hvor det er word-wrap wil jeg ha et tegn eller bilde enten i margen eller helt til høyre (begge steder er markert med sirkler på bildet).

 

3. VIKTIG: Man skal kunne markere teksten uten å markere linjenummerene. Og word-wrap-symbolet skal selvfølgelig heller ikke markeres.

 

4. Margen der linjenummerne er må kunne settes min-width på.

 

5. Margen skal være like bred gjennom hele kodesegmentet, hvis koden er over hundre (100) linjer skal hele margen bli bredere, det skal ikke være en smal marg opp til 99 og så en bredere fra 100.

 

6. Ikke noe JavaScript. Resultatet skal kunne kjøres gjennom PrinceXML, som ikke støtter JavaScript.

 

Her et et eksempel på det jeg har så langt. Ikke tenk på at alle linjenumrene er 1, det ordner jeg fra programmet.

Screenshot:

nox.png

HTML:

 

<html><head>
<link rel='stylesheet' type='text/css' href='style.css'>
<meta http-equiv='Content-Type' content='text/html;charset=utf-8'>
</head><body><div class=text>
<div class=pb_code><span class=pb_code><span class=pb_keyword>XIncludeFile </span><span class=pb_string>"pbsyntax.pb"</span><span class=pb_number><br>
<span class=code_line>1</span></span><span class=pb_number><br>
<span class=code_line>1</span></span><span class=pb_keyword>Procedure </span><span class=pb_function>ReadFileAsList</span><span class=pb_separator>(</span>File<span class=pb_separator>,</span><span class=pb_keyword> List </span><span class=pb_function>Txt</span><span class=pb_separator>.</span>s<span class=pb_separator>(</span><span class=pb_number></span><span class=pb_separator>)</span><span class=pb_number></span><span class=pb_separator>)</span><span class=pb_number><br>
<span class=code_line>1</span></span>  Format <span class=pb_operator>=</span><span class=pb_function> ReadStringFormat</span><span class=pb_separator>(</span>File<span class=pb_separator>)</span><span class=pb_number><br>
<span class=code_line>1</span></span><span class=pb_keyword>  If </span>Format <span class=pb_operator>=</span><span class=pb_number> </span><span class=pb_constant>#PB_Ascii</span><span class=pb_number><br>
<span class=code_line>1</span></span>    Format <span class=pb_operator>=</span><span class=pb_number> </span><span class=pb_constant>#PB_UTF8</span><span class=pb_number><br>
<span class=code_line>1</span></span><span class=pb_keyword>  EndIf<br>
<span class=code_line>1</span></span><span class=pb_keyword>  Repeat<br>
<span class=code_line>1</span></span><span class=pb_function>    AddElement</span><span class=pb_separator>(</span><span class=pb_function>Txt</span><span class=pb_separator>(</span><span class=pb_number></span><span class=pb_separator>)</span><span class=pb_number></span><span class=pb_separator>)</span><span class=pb_number><br>
<span class=code_line>1</span></span><span class=pb_function>    Txt</span><span class=pb_separator>(</span><span class=pb_number></span><span class=pb_separator>)</span><span class=pb_number> </span><span class=pb_operator>=</span><span class=pb_function> Trim</span><span class=pb_separator>(</span><span class=pb_function>ReadString</span><span class=pb_separator>(</span>File<span class=pb_separator>,</span> Format<span class=pb_separator>)</span><span class=pb_number></span><span class=pb_separator>)</span><span class=pb_number><br>
<span class=code_line>1</span></span><span class=pb_keyword>  Until </span><span class=pb_function>Eof</span><span class=pb_separator>(</span>File<span class=pb_separator>)</span><span class=pb_number><br>
<span class=code_line>1</span></span><span class=pb_keyword>EndProcedure<br>
<span class=code_line>1</span></span><span class=pb_number><br>
<span class=code_line>1</span></span><span class=pb_keyword>Global </span>InFilename<span class=pb_separator>.</span>s <span class=pb_operator>=</span><span class=pb_number> </span><span class=pb_string>"input.txt"</span><span class=pb_number><br>
<span class=code_line>1</span></span><span class=pb_keyword>Global </span>OutFilename<span class=pb_separator>.</span>s <span class=pb_operator>=</span><span class=pb_number> </span><span class=pb_string>"output.html"</span><span class=pb_number><br>
<span class=code_line>1</span></span><span class=pb_number><br>
<span class=code_line>1</span></span><span class=pb_keyword>If </span><span class=pb_function>ProgramParameter</span><span class=pb_separator>(</span><span class=pb_number>0</span><span class=pb_separator>)</span><span class=pb_number><br>
<span class=code_line>1</span></span>  InFilename <span class=pb_operator>=</span><span class=pb_function> ProgramParameter</span><span class=pb_separator>(</span><span class=pb_number>0</span><span class=pb_separator>)</span><span class=pb_number><br>
<span class=code_line>1</span></span><span class=pb_keyword>EndIf<br>
<span class=code_line>1</span></span><span class=pb_keyword>If </span><span class=pb_function>ProgramParameter</span><span class=pb_separator>(</span><span class=pb_number>1</span><span class=pb_separator>)</span><span class=pb_number><br>
<span class=code_line>1</span></span>  OutFilename <span class=pb_operator>=</span><span class=pb_function> ProgramParameter</span><span class=pb_separator>(</span><span class=pb_number>1</span><span class=pb_separator>)</span><span class=pb_number><br>
<span class=code_line>1</span></span><span class=pb_keyword>EndIf<br>
<span class=code_line>1</span></span><span class=pb_number><br>
<span class=code_line>1</span></span><span class=pb_function>ReadFile</span><span class=pb_separator>(</span><span class=pb_number>0</span><span class=pb_separator>,</span> InFilename<span class=pb_separator>)</span><span class=pb_number><br>
<span class=code_line>1</span></span><span class=pb_number><br>
<span class=code_line>1</span></span><span class=pb_keyword>NewList </span><span class=pb_function>T</span><span class=pb_separator>.</span>s<span class=pb_separator>(</span><span class=pb_number></span><span class=pb_separator>)</span><span class=pb_number><br>
<span class=code_line>1</span></span><span class=pb_number><br>
<span class=code_line>1</span></span><span class=pb_function>ReadFileAsList</span><span class=pb_separator>(</span><span class=pb_number>0</span><span class=pb_separator>,</span><span class=pb_function> T</span><span class=pb_separator>(</span><span class=pb_number></span><span class=pb_separator>)</span><span class=pb_number></span><span class=pb_separator>)</span><span class=pb_number><br>
<span class=code_line>1</span></span><span class=pb_function>CloseFile</span><span class=pb_separator>(</span><span class=pb_number>0</span><span class=pb_separator>)</span><span class=pb_number><br>
<span class=code_line>1</span></span><span class=pb_number><br>
<span class=code_line>1</span></span><span class=pb_keyword>Procedure </span><span class=pb_function>Allchars</span><span class=pb_separator>(</span>Needle<span class=pb_separator>.</span>s<span class=pb_separator>,</span> Haystack<span class=pb_separator>.</span>s<span class=pb_separator>)</span><span class=pb_number><br>
<span class=code_line>1</span></span><span class=pb_keyword>  If </span><span class=pb_function>Len</span><span class=pb_separator>(</span>Haystack<span class=pb_separator>)</span><span class=pb_number> </span><span class=pb_operator>></span><span class=pb_number> 4 </span><span class=pb_keyword>And </span><span class=pb_function>ReplaceString</span><span class=pb_separator>(</span><span class=pb_function>Space</span><span class=pb_separator>(</span><span class=pb_function>Len</span><span class=pb_separator>(</span>Haystack<span class=pb_separator>)</span><span class=pb_number></span><span class=pb_separator>)</span><span class=pb_number></span><span class=pb_separator>,</span><span class=pb_number> </span><span class=pb_string>" "</span><span class=pb_number></span><span class=pb_separator>,</span> Needle<span class=pb_separator>)</span><span class=pb_number> </span><span class=pb_operator>=</span> Haystack<br>
<span class=code_line>1</span><span class=pb_keyword>    ProcedureReturn </span><span class=pb_number>1<br>
<span class=code_line>1</span></span><span class=pb_keyword>  EndIf<br>
<span class=code_line>1</span></span><span class=pb_keyword>EndProcedure<br>
<span class=code_line>1</span></span><span class=pb_number><br>
<span class=code_line>1</span></span><span class=pb_keyword>Dim </span><span class=pb_function>H_Counter</span><span class=pb_separator>(</span><span class=pb_number>6</span><span class=pb_separator>)</span><span class=pb_number><br>
<span class=code_line>1</span></span><span class=pb_keyword>For </span>I <span class=pb_operator>=</span><span class=pb_number> 0 </span><span class=pb_keyword>To </span><span class=pb_number>6<br>
<span class=code_line>1</span></span><span class=pb_function>  H_Counter</span><span class=pb_separator>(</span>i<span class=pb_separator>)</span><span class=pb_number> </span><span class=pb_operator>=</span><span class=pb_number> 1<br>
<span class=code_line>1</span></span><span class=pb_keyword>Next<br>
<span class=code_line>1</span></span><span class=pb_number><br>
<span class=code_line>1</span></span><span class=pb_keyword>ForEach </span><span class=pb_function>T</span><span class=pb_separator>(</span><span class=pb_number></span><span class=pb_separator>)</span><span class=pb_number><br>
<span class=code_line>1</span></span><span class=pb_function>  T</span><span class=pb_separator>(</span><span class=pb_number></span><span class=pb_separator>)</span><span class=pb_number> </span><span class=pb_operator>=</span><span class=pb_function> ReplaceString</span><span class=pb_separator>(</span><span class=pb_function>T</span><span class=pb_separator>(</span><span class=pb_number></span><span class=pb_separator>)</span><span class=pb_number></span><span class=pb_separator>,</span><span class=pb_number> </span><span class=pb_string>"..."</span><span class=pb_number></span><span class=pb_separator>,</span><span class=pb_number> </span><span class=pb_string>"…"</span><span class=pb_number></span><span class=pb_separator>)</span><span class=pb_number><br>
<span class=code_line>1</span></span><span class=pb_function>  T</span><span class=pb_separator>(</span><span class=pb_number></span><span class=pb_separator>)</span><span class=pb_number> </span><span class=pb_operator>=</span><span class=pb_function> ReplaceString</span><span class=pb_separator>(</span><span class=pb_function>T</span><span class=pb_separator>(</span><span class=pb_number></span><span class=pb_separator>)</span><span class=pb_number></span><span class=pb_separator>,</span><span class=pb_number> </span><span class=pb_string>"– "</span><span class=pb_number></span><span class=pb_separator>,</span><span class=pb_number> </span><span class=pb_string>"<br>– "</span><span class=pb_number></span><span class=pb_separator>)</span><span class=pb_number><br>
<span class=code_line>1</span></span><span class=pb_keyword>Next<br>
<span class=code_line>1</span></span><span class=pb_number><br>
<span class=code_line>1</span></span><span class=pb_keyword>ForEach </span><span class=pb_function>T</span><span class=pb_separator>(</span><span class=pb_number></span><span class=pb_separator>)</span><span class=pb_number><br>
<span class=code_line>1</span></span><span class=pb_keyword>  If </span><span class=pb_function>Allchars</span><span class=pb_separator>(</span><span class=pb_number></span><span class=pb_string>"="</span><span class=pb_number></span><span class=pb_separator>,</span><span class=pb_function> T</span><span class=pb_separator>(</span><span class=pb_number></span><span class=pb_separator>)</span><span class=pb_number></span><span class=pb_separator>)</span><span class=pb_number><br>
<span class=code_line>1</span></span><span class=pb_function>    T</span><span class=pb_separator>(</span><span class=pb_number></span><span class=pb_separator>)</span><span class=pb_number> </span><span class=pb_operator>=</span><span class=pb_number> </span><span class=pb_string>"<h2 class=fmtH2>"</span><span class=pb_number><br>
<span class=code_line>1</span></span><span class=pb_function>    AddElement</span><span class=pb_separator>(</span><span class=pb_function>T</span><span class=pb_separator>(</span><span class=pb_number></span><span class=pb_separator>)</span><span class=pb_number></span><span class=pb_separator>)</span><span class=pb_number><br>
<span class=code_line>1</span></span><span class=pb_function>    T</span><span class=pb_separator>(</span><span class=pb_number></span><span class=pb_separator>)</span><span class=pb_number> </span><span class=pb_operator>=</span><span class=pb_function> Str</span><span class=pb_separator>(</span><span class=pb_function>H_Counter</span><span class=pb_separator>(</span><span class=pb_number>2</span><span class=pb_separator>)</span><span class=pb_number></span><span class=pb_separator>)</span><span class=pb_number></span><span class=pb_operator>+</span><span class=pb_number></span><span class=pb_string>"."</span><span class=pb_number><br>
<span class=code_line>1</span></span><span class=pb_function>    NextElement</span><span class=pb_separator>(</span><span class=pb_function>T</span><span class=pb_separator>(</span><span class=pb_number></span><span class=pb_separator>)</span><span class=pb_number></span><span class=pb_separator>)</span><span class=pb_number><br>
<span class=code_line>1</span></span><span class=pb_function>    NextElement</span><span class=pb_separator>(</span><span class=pb_function>T</span><span class=pb_separator>(</span><span class=pb_number></span><span class=pb_separator>)</span><span class=pb_number></span><span class=pb_separator>)</span><span class=pb_number><br>
<span class=code_line>1</span></span><span class=pb_function>    T</span><span class=pb_separator>(</span><span class=pb_number></span><span class=pb_separator>)</span><span class=pb_number> </span><span class=pb_operator>=</span><span class=pb_number> </span><span class=pb_string>"</h2>"</span><span class=pb_number><br>
<span class=code_line>1</span></span><span class=pb_function>    H_Counter</span><span class=pb_separator>(</span><span class=pb_number>2</span><span class=pb_separator>)</span><span class=pb_number> </span><span class=pb_operator>+</span><span class=pb_number> 1<br>
<span class=code_line>1</span></span><span class=pb_keyword>  EndIf<br>
<span class=code_line>1</span></span><span class=pb_keyword>Next<br>
<span class=code_line>1</span></span><span class=pb_number><br>
<span class=code_line>1</span></span><span class=pb_keyword>ForEach </span><span class=pb_function>T</span><span class=pb_separator>(</span><span class=pb_number></span><span class=pb_separator>)</span><span class=pb_number><br>
<span class=code_line>1</span></span><span class=pb_keyword>  If </span><span class=pb_function>Allchars</span><span class=pb_separator>(</span><span class=pb_number></span><span class=pb_string>"-"</span><span class=pb_number></span><span class=pb_separator>,</span><span class=pb_function> T</span><span class=pb_separator>(</span><span class=pb_number></span><span class=pb_separator>)</span><span class=pb_number></span><span class=pb_separator>)</span><span class=pb_number><br>
<span class=code_line>1</span></span><span class=pb_function>    T</span><span class=pb_separator>(</span><span class=pb_number></span><span class=pb_separator>)</span><span class=pb_number> </span><span class=pb_operator>=</span><span class=pb_number> </span><span class=pb_string>"<h3 class=fmtH3>"</span><span class=pb_number><br>
<span class=code_line>1</span></span><span class=pb_function>    NextElement</span><span class=pb_separator>(</span><span class=pb_function>T</span><span class=pb_separator>(</span><span class=pb_number></span><span class=pb_separator>)</span><span class=pb_number></span><span class=pb_separator>)</span><span class=pb_number><br>
<span class=code_line>1</span></span><span class=pb_function>    NextElement</span><span class=pb_separator>(</span><span class=pb_function>T</span><span class=pb_separator>(</span><span class=pb_number></span><span class=pb_separator>)</span><span class=pb_number></span><span class=pb_separator>)</span><span class=pb_number><br>
<span class=code_line>1</span></span><span class=pb_function>    T</span><span class=pb_separator>(</span><span class=pb_number></span><span class=pb_separator>)</span><span class=pb_number> </span><span class=pb_operator>=</span><span class=pb_number> </span><span class=pb_string>"</h3>"</span><span class=pb_number><br>
<span class=code_line>1</span></span><span class=pb_keyword>  EndIf<br>
<span class=code_line>1</span></span><span class=pb_keyword>Next<br>
<span class=code_line>1</span></span><span class=pb_number><br>
<span class=code_line>1</span></span><span class=pb_keyword>ForEach </span><span class=pb_function>T</span><span class=pb_separator>(</span><span class=pb_number></span><span class=pb_separator>)</span><span class=pb_number><br>
<span class=code_line>1</span></span><span class=pb_keyword>  If </span><span class=pb_function>T</span><span class=pb_separator>(</span><span class=pb_number></span><span class=pb_separator>)</span><span class=pb_number> </span><span class=pb_operator>=</span><span class=pb_number> </span><span class=pb_string>""</span><span class=pb_number><br>
<span class=code_line>1</span></span><span class=pb_function>    T</span><span class=pb_separator>(</span><span class=pb_number></span><span class=pb_separator>)</span><span class=pb_number> </span><span class=pb_operator>=</span><span class=pb_number> </span><span class=pb_string>"<p>"</span><span class=pb_number><br>
<span class=code_line>1</span></span><span class=pb_keyword>  EndIf<br>
<span class=code_line>1</span></span><span class=pb_keyword>Next<br>
<span class=code_line>1</span></span><span class=pb_number><br>
<span class=code_line>1</span></span><span class=pb_keyword>ForEach </span><span class=pb_function>T</span><span class=pb_separator>(</span><span class=pb_number></span><span class=pb_separator>)</span><span class=pb_number><br>
<span class=code_line>1</span></span><span class=pb_keyword>  If </span><span class=pb_function>Left</span><span class=pb_separator>(</span><span class=pb_function>T</span><span class=pb_separator>(</span><span class=pb_number></span><span class=pb_separator>)</span><span class=pb_number></span><span class=pb_separator>,</span><span class=pb_number> 1</span><span class=pb_separator>)</span><span class=pb_number> </span><span class=pb_operator>=</span><span class=pb_number> </span><span class=pb_string>"@"</span><span class=pb_number><br>
<span class=code_line>1</span></span>    Fn<span class=pb_separator>.</span>s <span class=pb_operator>=</span><span class=pb_function> Mid</span><span class=pb_separator>(</span><span class=pb_function>T</span><span class=pb_separator>(</span><span class=pb_number></span><span class=pb_separator>)</span><span class=pb_number></span><span class=pb_separator>,</span><span class=pb_number> 2</span><span class=pb_separator>)</span><span class=pb_number><br>
<span class=code_line>1</span></span><span class=pb_function>    T</span><span class=pb_separator>(</span><span class=pb_number></span><span class=pb_separator>)</span><span class=pb_number> </span><span class=pb_operator>=</span><span class=pb_function> PBSyntaxHighlightFile</span><span class=pb_separator>(</span>Fn<span class=pb_separator>)</span><span class=pb_number><br>
<span class=code_line>1</span></span><span class=pb_keyword>  EndIf<br>
<span class=code_line>1</span></span><span class=pb_keyword>Next<br>
<span class=code_line>1</span></span><span class=pb_number><br>
<span class=code_line>1</span></span><span class=pb_number><br>
<span class=code_line>1</span></span><span class=pb_number><br>
<span class=code_line>1</span></span><span class=pb_function>CreateFile</span><span class=pb_separator>(</span><span class=pb_number>0</span><span class=pb_separator>,</span> OutFilename<span class=pb_separator>)</span><span class=pb_number><br>
<span class=code_line>1</span></span><span class=pb_function>WriteStringN</span><span class=pb_separator>(</span><span class=pb_number>0</span><span class=pb_separator>,</span><span class=pb_number> </span><span class=pb_string>"<html><head>"</span><span class=pb_number></span><span class=pb_separator>)</span><span class=pb_number><br>
<span class=code_line>1</span></span><span class=pb_function>WriteStringN</span><span class=pb_separator>(</span><span class=pb_number>0</span><span class=pb_separator>,</span><span class=pb_number> </span><span class=pb_string>"<link rel='stylesheet' type='text/css' href='style.css'>"</span><span class=pb_number></span><span class=pb_separator>)</span><span class=pb_number><br>
<span class=code_line>1</span></span><span class=pb_function>WriteStringN</span><span class=pb_separator>(</span><span class=pb_number>0</span><span class=pb_separator>,</span><span class=pb_number> </span><span class=pb_string>"<meta http-equiv='Content-Type' content='text/html;charset=utf-8'>"</span><span class=pb_number></span><span class=pb_separator>)</span><span class=pb_number><br>
<span class=code_line>1</span></span><span class=pb_function>WriteStringN</span><span class=pb_separator>(</span><span class=pb_number>0</span><span class=pb_separator>,</span><span class=pb_number> </span><span class=pb_string>"</head><body><div class=text>"</span><span class=pb_number></span><span class=pb_separator>)</span><span class=pb_number><br>
<span class=code_line>1</span></span><span class=pb_keyword>ForEach </span><span class=pb_function>T</span><span class=pb_separator>(</span><span class=pb_number></span><span class=pb_separator>)</span><span class=pb_number><br>
<span class=code_line>1</span></span><span class=pb_function>  WriteStringN</span><span class=pb_separator>(</span><span class=pb_number>0</span><span class=pb_separator>,</span><span class=pb_function> T</span><span class=pb_separator>(</span><span class=pb_number></span><span class=pb_separator>)</span><span class=pb_number></span><span class=pb_separator>)</span><span class=pb_number><br>
<span class=code_line>1</span></span><span class=pb_keyword>Next<br>
<span class=code_line>1</span></span><span class=pb_function>WriteStringN</span><span class=pb_separator>(</span><span class=pb_number>0</span><span class=pb_separator>,</span><span class=pb_number> </span><span class=pb_string>"</div></body></html>"</span><span class=pb_number></span><span class=pb_separator>)</span><span class=pb_number><br>
<span class=code_line>1</span></span><span class=pb_number><br>
<span class=code_line>1</span></span><span class=pb_number><br>
<span class=code_line>1</span></span><span class=pb_number><br>
<span class=code_line>1</span></span><span class=pb_number><br>
<span class=code_line>1</span></span><span class=pb_number><br>
<span class=code_line>1</span></span><span class=pb_number><br>
<span class=code_line>1</span></span><span class=pb_number><br>
<span class=code_line>1</span></span><span class=pb_number><br>
<span class=code_line>1</span></span><span class=pb_number><br>
<span class=code_line>1</span></span><span class=pb_number></span><span class=pb_comment>; IDE Options = PureBasic 4.50 (Windows - x86)<br>
<span class=code_line>1</span></span><span class=pb_number></span><span class=pb_comment>; EnableUnicode<br>
<span class=code_line>1</span></span><span class=pb_number></span><span class=pb_comment>; EnableXP<br>
<span class=code_line>1</span></span><span class=pb_number></span><span class=pb_comment>; Executable = ptext.exe</span><span class=pb_number></span></span></div>
</div></body></html>

 

CSS:

 

body {
     background: #F0F0F0;
     color: rgb(50, 50, 50);
     margin: 0;
     padding: 0;
}

div.text {
     max-width: 500px;
     margin-left: auto;
     margin-right: auto;
     font-family: Constantia, Sylfaen, Serif;
     font-size: 10pt;
     line-height: 155%;
     text-align: justify;
     /*text-indent: 1.5em;*/
}

div.pb_code {
   font-family: consolas;
   font-size: 10pt;
   line-height: 160%;
   background-color: white;
   color: black;
}

span.pb_code {
   font-weight: normal;
}

span.pb_keyword {
   font-weight: bold;
   /*color: rgb(10, 108, 18);*/
   color: rgb(30,70,138);
}

span.pb_comment {
   color: blue;
   font-style: italic;
}

span.pb_constant {
   color: rgb(122, 24, 112);
   color: rgb(170, 0, 80);
}

span.pb_number {
   color: rgb(170, 0, 80);
}

span.pb_string {
   color: rgb(150, 94, 0);
}

span.pb_function {
   color: rgb(0, 102, 0);
}

span.pb_asm {

}

span.pb_operator {
   color: rgb(0, 0, 0);
}

span.pb_structure {

}

span.pb_pointer {
   color: blue;
}

span.pb_separator {
   /*color: red;*/
}

span.pb_label {

}

span.code_line {
   width: 20px;
   display: block;
   float: left;
   color: rgb(102, 102, 102);
   font-weight: normal;
   background-color: rgb(255, 198, 230);
   text-align: right;
   padding-right: 2px;
   margin-right: 2px;
}

 

Legg merke til følgende problemer:

A. Margen brytes ved word-wrap, og koden går "inn i" margen.

B. Manglende symbol ved word-wrap.

C. Umulig å markere koden uten å markere linjenummerne.

D. Det synes ikke, fordi alle tallene er 1, men hvis man kommer til linje 10000 f.eks. vil ikke margen bli tilsvarende bredere på linje 1.

 

Jeg har en ide om å løse noen av problemene ved å bruke tabeller, problemet er at det igjen skaper nye problemer.

Endret av tsg1zzn
Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Du må være et medlem for å kunne skrive en kommentar

Opprett konto

Det er enkelt å melde seg inn for å starte en ny konto!

Start en konto

Logg inn

Har du allerede en konto? Logg inn her.

Logg inn nå
Gå til emneliste
×
×
  • Opprett ny...