كيفية إنشاء زر نسخ على علامة الرمز المسبق أو ترتيب بناء الجملة

 إنشاء زر كود نسخ في بناء جملة بناء الجملة

 كيفية إنشاء زر نسخ على علامة الرمز المسبق أو ترتيب بناء الجملة

مرحبًا بالجميع في هذه المناسبة ، سأشارك كيفية إنشاء زر نسخ على علامة الرمز المسبق أو بناء الجملة.

بشكل عام ، جعل بناء الجملة أعلى باستخدام العلامات<pre><code></code></pre>ولكن هناك أيضًا أولئك الذين يستخدمون علامة DIV لأن استخدام أي علامة يمكن أن يعتمد فقط على الكتابة على CSS.

في المنشور السابق ، قمت بمشاركة بناء جملة ملونة مع CSS فقط وكيفية 

في هذا المنشور ، لم أشارك في كيفية عمل دقة بناء جملة لأنني في المنشور السابق شاركت ، لكنني هنا أشارك فقط كيفية إنشاء زر النسخ وللأقلاب الجملة باستخدام النموذج الموجود بالفعل في القالب الخاص بك.

أشارك هذا الرمز لأنه من الأسهل بالنسبة لأولئك منكم الذين يرغبون في إضافة نسخة من الكود في Syntax Highlighter دون الحاجة إلى تغيير CSS القديمة وبالطبع لا يرعب المدونة لأنها تستخدم JavaScript قليلاً فقط.

إنشاء نسخة من زر الرمز المسبق

الرجاء إدخال المدون> السمة > تحرير HTML Calin CSS أدناه والملازم على الرمز]]></b:skin>أو فوق الكود</style>

  

  .preCopy:hover{opacity:1}
.preCopy{-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-ms-user-select:none;-moz-user-select:none;opacity:.5;transition: opacity linear 0.5s;position:absolute;right:0;z-index:2;top:0;background:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23989b9f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><g><rect x='5.54615' y='5.54615' width='16.45385' height='16.45385' rx='4'></rect><path d='M171.33311,181.3216v-8.45385a4,4,0,0,1,4-4H183.787' transform='translate(-169.33311 -166.86775)'></path></g></svg>") 40px / 15px no-repeat;background-color:#d9d9d9;color:#989b9f;border:none;font-size:10px;line-height:2.2em;border-radius:0 4px 0 4px;padding:5px 29px 5px 8px}
.preCopy.copyed{background:url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGFyaWEtaGlkZGVuPSJ0cnVlIiBmb2N1c2FibGU9ImZhbHNlIiBkYXRhLXByZWZpeD0iZmFzIiBkYXRhLWljb249ImNoZWNrIiBjbGFzcz0ic3ZnLWlubGluZS0tZmEgZmEtY2hlY2sgZmEtdy0xNiIgcm9sZT0iaW1nIiB2aWV3Qm94PSIwIDAgNTEyIDUxMiIgc3R5bGU9IiYjMTA7ICAgIGNvbG9yOiAjMmFmZjMyOyYjMTA7Ij48cGF0aCBmaWxsPSJjdXJyZW50Q29sb3IiIGQ9Ik0xNzMuODk4IDQzOS40MDRsLTE2Ni40LTE2Ni40Yy05Ljk5Ny05Ljk5Ny05Ljk5Ny0yNi4yMDYgMC0zNi4yMDRsMzYuMjAzLTM2LjIwNGM5Ljk5Ny05Ljk5OCAyNi4yMDctOS45OTggMzYuMjA0IDBMMTkyIDMxMi42OSA0MzIuMDk1IDcyLjU5NmM5Ljk5Ny05Ljk5NyAyNi4yMDctOS45OTcgMzYuMjA0IDBsMzYuMjAzIDM2LjIwNGM5Ljk5NyA5Ljk5NyA5Ljk5NyAyNi4yMDYgMCAzNi4yMDRsLTI5NC40IDI5NC40MDFjLTkuOTk4IDkuOTk3LTI2LjIwNyA5Ljk5Ny0zNi4yMDQtLjAwMXoiLz48L3N2Zz4=') 50px / 15px no-repeat;background-color:#d9d9d9;border:none;font-size:10px;line-height:2.2em;border-radius:0 4px 0 4px;padding:5px 29px 5px 8px} 

استمر في نسخ JavaScript أدناه ووضعه على الرمز</body>أو&lt;!--</body>--&gt;&lt;/body&gt;

  

  <script>/*<![CDATA[*/
let preTag = document.querySelectorAll("pre");
async function copyCode(e) {
    const t = e.srcElement;
    t.innerText = "Copyed";
    let o = t.parentElement.querySelector("code").innerText;
    await navigator.clipboard.writeText(o), t.classList.add("copyed"), setTimeout((() => {
        t.classList.remove("copyed"), t.innerText = "Copy"
    }), 1e3)
}
preTag.forEach((e => {
    if (navigator.clipboard) {
        let t = document.createElement("button");
        t.classList.add("preCopy"), t.innerText = "Copy", t.addEventListener("click", copyCode), e.appendChild(t)
    }
}));
/*]]>*/</script>