코드 박스(code box) 꾸미기

현재 github.io를 jekyll를 이용한 minimal mistake 을 사용하고있다

code box는 코드를 보여주는 박스이다
보통 코드박스는

\```  
코드내용  
\```

로 작성한다

\```sh  
코드내용  
\```  

로 설정하면 쉘 코드의 형식으로 코드를 꾸며준다
여기서 쉘코드박스를 작성할때 terminal이 보여지게할것이다

기존

작업 후

1. assets/css/main.scss

맨 아래 하단에 다음 코드 추가

.language-sh:before {
    display: table;
    padding: 8px;
    width: 100%;
    padding: 5px 0;
    font: 400 16px/24px 'Helvetica Neue', Helvetica, Arial, sans-serif;
    color: #444;
    text-shadow: 0px 1px 0px rgba(#fff, 0.5);
    background-color: #f7f7f7;
    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2Y3ZjdmNyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjclIiBzdG9wLWNvbG9yPSIjY2ZjZmNmIiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2FhYWFhYSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
    background-image: -webkit-gradient(linear, left top, left bottom, from(#f7f7f7), color-stop(7%, #cfcfcf), to(#aaa));
    background-image: -webkit-linear-gradient(top, #f7f7f7 0%, #cfcfcf 7%, #aaa 100%);
    background-image: -moz-linear-gradient(top, #f7f7f7 0%, #cfcfcf 7%, #aaa 100%);
    background-image: -o-linear-gradient(top, #f7f7f7 0%, #cfcfcf 7%, #aaa 100%);
    background-image: linear-gradient(top, #f7f7f7 0%, #cfcfcf 7%, #aaa 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7f7f7', endColorstr='#aaaaaa',GradientType=0 );
    border-bottom: 1px solid #111;
    text-align: center;
    content: "terminal";
    -webkit-border-radius: 5px 5px 0 0;
    -moz-border-radius: 5px 5px 0 0;
    border-radius: 5px 5px 0 0;
    -webkit-box-shadow: $md-codebox-shadow;
    -moz-box-shadow: $md-codebox-shadow;
    box-shadow: $md-codebox-shadow;
    transform: translateY(-10px);
}   

\```java  
코드내용
\```

만약 위처럼 sh 대신 java 코드에 terminal을 적용하고 싶으면

.language-java:before{
  ...
}

로 적용하면 된다

2. _sass/minimal-mistakes/_variables.scss

맨 아래하단에 추가

$md-codebox-shadow: inset 0 1px 10px rgba(#000, 0.3), 0 1px 0 rgba(#ffffff, 0.1),
  0 -1px 0 rgba(#000, 0.5);

Custom

👉 abbr 태그를 이용하여 Mouse Hover시 도움말 보기 2022.06.14

👉 코드 박스(code box) 꾸미기 2022.06.05