Pygments 행 번호가있는 HTML 표 - 코드 셀의 가로 스크롤 막대

Question

Markdown의 Python 구현을 codehilite 및 lineos 옵션과 함께 사용하고 있습니다. 다음과 같은 코드를 생성합니다 :

<table class="codehilitetable"> 
    <tr> 
     <td class="linenos"> 
      <div class="linenodiv"> 
       <pre>1 
        2</pre> 
      </div> 
     </td> 
     <td class="code"><div class="codehilite"><pre> 
      <span class="k">def</span> 
      <span class="nf">func</span> 
      <span class="p">(</span> 
      <span class="n">n</span> 
      <span class="p">):</span> 
      <span class="k">return</span> 
      <span class="n">n</span> 
      <span class="o">**</span> 
      <span class="mi">2</span> 
      <span class="o">+</span> 
      <span class="mi">3</span> 
      <span class="o">*</span> 
      <span class="n">n</span> 
      <span class="o">+</span> 
      <span class="mi">1</span> 
     </pre></div></td> 
    </tr> 
</table> 

이것은 하나의 행과 두 개의 셀이있는 테이블입니다. 첫 번째 셀은 줄 번호 용이고 두 번째 셀은 실제 코드 용입니다. 각 셀의 내용은 div 및 pre 요소 안에 있고 span 요소는 구문 색칠에 사용됩니다.

코드 줄이 너무 길 때를 대비하여 가로 스크롤 막대를 표시하고 싶지만 테이블이기 때문에 문제가 있습니다.

이상적으로는 코드 셀 (td.code)에 스크롤바 만 있으면 좋겠지 만 표의 너비를 100 %로 설정하면 두 셀이 모두 50 % 길어집니다. 줄 번호 셀 (td.linenos)이 실제 줄 번호가 표시되는 데 필요한만큼 오래 있어야합니다. 이것이 가능하지 않다면

pre, code { overflow:auto; } 

table.codehilitetable { table-layout: fixed; white-space: nowrap; width:100%; } 

가, 나는 전체 행 (tr)에 스크롤을 가지고 싶습니다

여기에 내 현재 CSS입니다. 그러나 위의 코드는 테이블 행에서 작동하지 않습니다.

Answer 1

.codehilite{ 
      width:100%; 
      height: auto; 
      overflow: auto; 
     } 

이렇게하면 코드 표 셀 안에 div가 필요한 경우 가로 스크롤 막대가 생깁니다.

Answer 2

이 모든 것이 필요한 것은 아니지만이 중 일부는 효과가 있습니다.

컨테이너를 실제로 작게 만들면 pre 컨테이너가 올바르게 스크롤됩니다.

.codehilite pre, .codehilitetable .linenodiv pre { 
    font-size: 1em; 
    line-height: 1.4em; 
} 
table.docutils, table.docutils tbody, table.docutils tr, table.docutils td { 
    width: 100%; 
    max-width: 100%; 
    display: block; 
} 
.codehilitetable td.linenos, .codehilitetable .linenodiv pre { 
    padding: 0; 
    border-right: none; 
    display: table-cell; 
    width: 50px; 
} 
.codehilitetable td.code { 
    display: table-cell; 
    overflow-x: scroll !important; 
} 
.codehilitetable td.code .codehilite{ 
    max-width: 100%; 
} 
.codehilitetable td.code .codehilite pre { 
    width: 10px; 
    max-width: 100%; 
}