깨끗한 코드 상자

코드를 문서화하는 아름다운 방법을 생각해 본 적이 있습니까?
글쎄, 나는 그것을 할 수있는 간단한 방법이 있습니다!

다음과 같이 표시됩니다.

매우 단순하지만 깨끗하고보기에 즐겁습니다.

코드를 찾고 있다면 CSS에 다음을 추가하십시오.

pre {
    padding: 30px;
    background-color: #f5f2f2;
    border-radius: 10px;
    display: inline-block;
}
code {
    padding: 10px;
    background-color: #141414;
    color: white;
    display: block;
    border-radius: 10px;
    box-shadow: 10px 10px 20px grey, -10px -10px 20px white, 5px 5px 5px black inset;
    text-shadow: 5px 5px 5px black, -2px -2px 2px #212121;
}

이 CSS를 삽입하는 것이 게으른 경우 HTML에 다음을 삽입하십시오.

<!--Deperected-->
<link rel="stylesheet" href="https://imagineeeinc.github.io/api/cdn/css/codebox.css">
<!--New from a new source-->
<link rel="stylesheet" href="https://eureka-imagineee-server.github.io/code-snips/css/codebox.css">

html의 경우 다음을 추가하십시오.

<pre><code>
-->your code goes here<--
</code></pre>

확실히 Highlight js와 같은 구문 형광펜에 연결하여 훨씬 더 멋지게 만들 수 있으며 언제든지 자신의 필요에 따라 코드를 편집할 수 있습니다.

펜 참조Code Box