SOURCE

console 命令行工具 X clear

                    
>
console
<!DOCTYPE html>
<html lang="en">

<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/marked/0.8.0/marked.min.js"></script>
    <link rel="stylesheet" href="style.css">
</head>

<body style="margin: 0;">
    <div class="pad">
        <div id="drag" class="left" contenteditable="true" placeholder=""></div>
        <div class="right"></div>
    </div>


    <script>
        marked.setOptions({breaks:true})
        $('#drag').sortable()
        $('.left').keyup(function(){
            var leftText = document.querySelector('.left').innerText
            console.log(leftText)
            $('.right').html(marked(leftText))
        })
        
    </script>

</body>

</html>
body {
    background-color: black;
}

.pad {
    display: flex;
    background-color:#212A33;
    width: 100vw;
    height: 100vh;
}

.left {

    white-space: pre-wrap;
    white-space: pre-line;
    width: 50vw;
    padding: 40px;
    height: 100%;
    background-color: aliceblue;

}

.right {
    background-color:#212A33;
    width: 50vw;
    color: aliceblue;
    height: 100%;
    padding: 40px;
    /* white-space: pre-wrap; */
    /* padding: 50px; */
}


blockquote p{
    color: gainsboro;
    font-weight: 800;
    border-left: solid white 2px;
    padding-left: 30px;
}

a:link {
    color: white;
    text-decoration: none;
}

a:visited {
    text-decoration: none;
    color:white;
}

a:hover {
    text-decoration: underline;
    color: yellow;
}

a:active {
    text-decoration: none;
    color: #FF0000;
}