0

로를 codeblocks를 인하하는 이상한 공간을 추가하는 코드 블록 :Pygments는 포맷터는 아래 그림에서

enter image description here

명시 적으로 내가 모든 전에 공간을 의미, 무슨 말인지 지적., +, ], |=. 아마 다른 곳에 오는 다른 구두점뿐만 아니라.

필자는 markdown에 추가 할 코드 블럭을 포맷하기 위해 pygments.rb와 Redcarpet gem을 사용하고 있습니다. 물론, 가격 인하 `역 따옴표, 다음

.highlight 
    pre 
    white-space: pre 
    overflow: scroll 
    word-wrap: normal 

.codebox 
    margin: auto 
    margin-top: 15px 
    margin-bottom: -5px 
    padding-right: 8px 
    padding-left: 8px 
    padding-top: 5px 
    padding-bottom: 5px 
    padding-top: -20px 
    background-color: $codebox 
    p 
     font-family: 'Rockwell Bold' 
     &::selection 
      background: $pigPink 
      color: #fff 
     &::moz-selection 
      background: $pigPink 
      color: #fff 
    pre 
     font-family: 'Rockwell Bold' 
     font-size: 90% 

및 각 코드 블록이 SASS는 (실제 파일에서 마우스 오른쪽 버튼을 탭 이동)와 스타일 .codebox의 DIV에 둘러싸여 있습니다.

application_helper.rb

class HTMLwithPygments < Redcarpet::Render::HTML 
    def block_code(code, language) 
     Pygments.highlight(code, lexer: language) 
    end 
    end 

    def markdown(text) 
    renderer = HTMLwithPygments.new(hard_wrap: true) 
    options = { 
     nowrap: true, 
     autolink: true, 
     no_intra_emphasis: true, 
     fenced_code_blocks: true, 
     lax_html_blocks: true, 
     strikethrough: true, 
     superscript: true 
    } 
    Redcarpet::Markdown.new(renderer, options).render(text).html_safe 
    end 
+1

웹 속성에서 문제 영역을 확인하여 일부 CSS가 범인인지 확인하고 패딩/여백을 추가 할 수 있습니까? 아니면 실제 공간입니까? –

+0

예! 범인 엘리먼트에 적용되는 ".o"클래스가 있으며 여백이 7 픽셀 남았습니다. css에 .o 규칙을 추가하면 트릭을 만들었습니다. 그 제안에 감사드립니다, 그것은 죽었습니다! – Sasha

+0

당신이 그 대답을 내놓을 수 있기를 바랍니다. 그러면 받아 들일 수 있습니다. –

답변

0

내가 코멘트에 말했듯이, 당신은 웹 관리자와 결과 코드 블록의 CSS를 확인 할 수 있습니다 : 그것은 관련이 있다면, 여기 내 pygments의 구성 설정입니다. Pygments는 결과 코드 블록의 다른 토큰에 다른 CSS 규칙을 적용하여 작동합니다. 가지고있는 CSS 중 일부가이 출력과 충돌하여 사용자가 목격하고있는 효과를 생성하거나 코드 블록의 기본 스타일 시트가이를 유발할 수 있습니다. 그것은 간단한 수정이어야합니다.

관련 문제