HTML의 마크다운 코드 블록

안녕하세요! 저는 Markdown 코드 블록을 좋아하지만 기본적으로 HTML에는 Markdown 코드 블록이 없습니다. CSS로 해보겠습니다.

1. CSS 추가

1.1. CSS에 다른 파일 사용

• CSS에 다음을 추가하세요:
• 이 코드를 style.css에 넣으세요.

.code {
    width: auto;
    max-width: 80%;
    background-color: #2d2d2d;
    color: #ffffff;
    border: 1px solid #444;
    border-radius: 8px;
    padding: 20px;
    margin: 0 auto;
    font-family: 'Courier New', Courier, monospace;
    font-size: 14px;
    line-height: 1.5;
    overflow-x: auto;
    white-space: pre-wrap;
    word-wrap: break-word;
    margin-bottom: 15px;
}

.code pre {
    margin: 0;
}

.code code {
    display: block;
}

1.2. 사용 꼬리표

• 스타일 태그에 다음을 추가하세요.

.code {
    width: auto;
    max-width: 80%;
    background-color: #2d2d2d;
    color: #ffffff;
    border: 1px solid #444;
    border-radius: 8px;
    padding: 20px;
    margin: 0 auto;
    font-family: 'Courier New', Courier, monospace;
    font-size: 14px;
    line-height: 1.5;
    overflow-x: auto;
    white-space: pre-wrap;
    word-wrap: break-word;
    margin-bottom: 15px;
}

.code pre {
    margin: 0;
}

.code code {
    display: block;
}

2. 사용하기

<p class="code">
   your text here
</p>

예를 들어 내 웹사이트(https://modvim.quitaxd.online/installation)에서 사용했습니다.

살아있지 않다면 스크린샷을 드립니다:

배경색을 수동으로 변경했습니다.

위 내용은 HTML의 마크다운 코드 블록의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!