Geliştirme ile ilgilenen bir blogunuz varsa, muhtemelen kullanıcılarınıza kod göstermek zorunda kalmışsınızdır. Bu nedenle bugün size, yalnızca gerektiğinde kodu yükleyecek şekilde optimize edilmiş kopyalama düğmeli bir kod vurgulayıcıyı nasıl ekleyeceğinizi göstereceğim.
Kurulum
Öncelikle aşağıdaki stilleri projenize dahil etmeniz gerekecektir. Örneğin, WordPress kullanıyorsanız bunları style.css dosyasına dahil edebilirsiniz. Blogger'da şablondaki CSS Ekle seçeneğini kullanmalısınız. Diğer herkes için sitenizin <head> bölümüne ekleyebilirsiniz.
pre {
--copy-text: "Copy";
--copied-text: "Copied!";
--code-bg: #2a2833;
--code-color: #9a92be;
--code-color-comment: #787878;
--code-color-string: #ffcd81;
--code-color-selector: #a38eff;
--code-color-property: #a38eff;
--code-color-tag: #6a6684;
--code-color-tag-name: #eeebfe;
--code-color-attr: #c3b6ff;
--code-color-class: #eeebff;
--code-color-number: #ffcd95;
position: relative;
font-family: SFMono-Regular, monospace;
}
pre > code {
background-color: var(--code-bg);
color: var(--code-color);
display: block;
overflow-x: auto;
white-space: pre;
padding: 1.5rem;
border-radius: 0.5rem;
}
.hljs-copy {
position: absolute;
border: 0 none;
inset: 0.5rem 0.5rem auto auto;
padding: 0.5rem 0.75rem;
background-color: rgba(0, 0, 0, 0.5);
color: #fff;
cursor: pointer;
border-radius: 0.5rem;
transition: 0.3s background-color;
font-size: 14px;
}
.hljs-copy:hover { background-color: rgba(0, 0, 0, 0.75) }
.hljs-copy::before { content: var(--copy-text) }
.hljs-copy.is-copied::before { content: var(--copied-text) }
.hljs-name,
.hljs-section { color: var(--code-color-tag-name) }
.hljs-tag { color: var(--code-color-tag) }
.hljs-selector-class { color: var(--code-color-class) }
.hljs-number { color: var(--code-color-number) }
.hljs-comment,
.hljs-meta { color: var(--code-color-comment) }
.hljs-emphasis,
.hljs-quote,
.hljs-string,
.hljs-strong,
.hljs-template-variable,
.hljs-variable { color: var(--code-color-string) }
.hljs-keyword,
.hljs-selector-tag,
.hljs-type { color: var(--code-color-selector) }
.hljs-attribute,
.hljs-bullet,
.hljs-literal,
.hljs-symbol { color: var(--code-color-property) }
.hljs-attr,
.hljs-selector-attr,
.hljs-selector-id,
.hljs-selector-pseudo,
.hljs-title { color: var(--code-color-attr) }
Şimdi de kopyala düğmesinin eklenmesi ve kod vurgulayıcının yüklenmesiyle ilgilenecek olan betik. Bunu </body> etiketinin üzerine eklemelisiniz ya da main.js dosyanız varsa oraya ekleyebilirsiniz.
<script>/*<![CDATA[*/
async function initHighlight() {
const loadScript = () => new Promise((resolve, reject) => {
const script = document.createElement('script')
script.src = 'https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11/build/highlight.min.js'
script.onload = resolve
script.onerror = reject
document.body.appendChild(script)
})
try {
await loadScript()
hljs.highlightAll()
} catch (error) {
console.error(error)
}
}
function addCopyButtons (codeBlock) {
if (!navigator || !navigator.clipboard) return
const clipboard = navigator.clipboard
const $button = document.createElement('button')
$button.className = 'hljs-copy'
$button.addEventListener('click', function () {
clipboard.writeText(codeBlock.textContent).then(function () {
$button.blur()
$button.classList.add('is-copied')
$button.disabled = true
setTimeout(function () {
$button.disabled = false
$button.classList.remove('is-copied')
}, 2000)
})
})
const pre = codeBlock.parentNode
pre.insertBefore($button, pre.firstChild)
}
function initCodeBlocks () {
const codeBlocks = document.querySelectorAll('pre > code')
if (codeBlocks.length === 0) return
initHighlight()
codeBlocks.forEach(function (codeBlock) {
addCopyButtons(codeBlock)
})
}
initCodeBlocks()/*]]>*/
</script>
Bu kodun yaptığı şey, tıklandığında kod içeriğini kopyalayan bir düğme eklemektir. Ayrıca kod vurgulayıcıyı da yükler, ancak her iki eylemi de yalnızca sayfada en az bir kod bloğu olduğunda gerçekleştirir.
Nasıl kullanılır
Bunu kullanmak için sayfanıza bir kod bloğu eklemeniz yeterlidir. Kodun aşağıda gösterildiği gibi bir <pre> ve <code> etiketi içinde olması gerektiğini unutmayın:
<pre><code>
// Kodunuzu buraya yazın
</code></pre>
Genel olarak highlightJs kullandığınız dili algılar, ancak bunun yeterli olmadığı veya başarısız olduğu durumlarda, bir sınıf kullanarak dili belirtebilirsiniz:
<pre><code class="language-html">
// Kodunuzu buraya yazın
</code></pre>
Ayrıca, tüm HTML kodlarının dönüştürülmesinin çok önemli olduğunu unutmayın. Bu görevde size yardımcı olmak için kullanabileceğiniz bir html kodu dönüştürücü aracı geliştirdim.
Özelleştir
Kod vurgulayıcıyı özelleştirmek istiyorsanız, bunu CSS kodunun başındaki değişkenleri değiştirerek yapabilirsiniz. Bu değişkenler kod vurgulayıcının renklerini ve diğer önemli stilleri değiştirmekten sorumludur.
Değişken isimleriyle açıklayıcı olmaya çalıştım, ancak herhangi bir sorunuz varsa bana yorumlarda sorabilirsiniz. Merak ediyorsanız, stiller geliştirici Simurai'nin Duotone Dark temasından esinlenmiştir.
Açıklamalar
Makale boyunca <pre> ve <code> bloklarını yalnızca kod görüntülemek için kullandığınız varsayılmıştır. Bu etiketleri başka içerikleri görüntülemek için kullanıyorsanız, bazı değişiklikler yapmanız gerekebilir.
Sonuç
Buraya kopyalama düğmeli bir kod vurgulayıcı eklemek için bir çözüm aramaya geldiyseniz, umarım bu makale size bir şekilde yardımcı olmuştur. Herhangi bir sorunuz veya öneriniz varsa yorumlara bırakabilirsiniz.
