note code { position: relative; display: inline-block; width: auto; min-width: 14px; height: auto; min-height: 14px; cursor: pointer; background: url(guide_icon.svg); background-repeat: no-repeat; background-size: contain; margin: 0 6px; color: var(--tool-color); } .language-para { background: none; color: unset; } code:hover .popup_contence { display: inline-block; } code ul { list-style-type: disc; padding-left: 20px; } code ol { list-style-type: decimal; padding-left: 20px; } .popup_contence { border-top: 7px; position: absolute; border: 1px solid var(--border-line-color); border-radius: 5px; top: 180%; width: max-content; min-width: 18em; max-width: max(25vw, 100%); min-height: 15em; padding: 10px; background-color: var(--drop-bg-color); box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); font-size: 10pt; text-align: left; display: none; margin: 0.3em; margin: -1px 0px; box-shadow: 0px 3px 13px 0px var(--shadow-color); color: var(--main-color); z-index: 200; } .popup_contence:after { content: "\00a0"; width: 0; height: 0; display: block; border-style: solid; border-width: 10px; border-color: transparent transparent var(--drop-bg-color) transparent; position: absolute; top: -20px; } .popup_contence:before { content: ''; position: absolute; bottom: 100%; width: 100%; border: 6px solid transparent; } .popup_contence h1 { font-size: 1.5em; font-weight: 700; } .popup_contence h2 { font-size: 1.3em; font-weight: 700; } .popup_contence h3 { font-size: 1.1em; font-weight: 700; } .popup_contence h4 { font-size: 1em; font-weight: 700; } .popup_contence li { white-space: normal; word-break: normal; } .popup_contence pre { background-color: rgba(0, 0, 0, 0.1); } .popup_contence code { white-space: normal; word-break: normal; font-family: arial; }