Chuyển đến nội dung chính

Hướng dẫn thêm tính năng double-click để sao chép đoạn mã trong Blogger

Hướng dẫn thêm tính năng double-click để sao chép đoạn mã trong Blogger

Hướng dẫn thêm tính năng double-click để sao chép đoạn mã trong Blogger

Trong bài viết này, chúng ta sẽ học cách thêm tính năng "double-click to copy" cho các đoạn mã trong bài viết trên Blogger bằng cách sử dụng HTML, CSS và JavaScript.

Thêm HTML và CSS

Trước tiên, bạn cần thêm các đoạn mã HTML và CSS vào bài viết của mình để tạo khung chứa mã và nút sao chép:

<div class="code-container" ondblclick="copyToClipboard(this)">

    <pre><code>

        function helloWorld() {

            console.log("Hello, world!");

        }

    </code></pre>

    <button class="copy-button" onclick="copyToClipboard(this.parentElement)">Sao chép</button>

</div>

Thêm JavaScript

Tiếp theo, thêm đoạn mã JavaScript sau vào thẻ <head> hoặc trước thẻ </body> để xử lý sự kiện sao chép:

function copyToClipboard(element) {

    var range, selection, worked;

    if (document.body.createTextRange) {

        range = document.body.createTextRange();

        range.moveToElementText(element);

        range.select();

    } else if (window.getSelection) {

        selection = window.getSelection();        

        range = document.createRange();

        range.selectNodeContents(element);

        selection.removeAllRanges();

        selection.addRange(range);

    }

    try {

        document.execCommand('copy');

        alert('Đoạn mã đã được sao chép!');

    } catch (err) {

        alert('Không thể sao chép đoạn mã');

    }

}

Kết Luận

Sau khi thêm đoạn mã HTML, CSS và JavaScript vào bài viết của mình, bạn đã có thể sử dụng tính năng "double-click to copy" cho các đoạn mã trong bài viết trên Blogger. Điều này giúp người đọc dễ dàng sao chép đoạn mã mà không gặp khó khăn.

Nhận xét

Đăng nhận xét

Bài đăng phổ biến từ blog này

Hướng Dẫn Xóa Các Style Tùy Chỉnh Trong Word Bằng VBA

  Hướng Dẫn Xóa Các Style Tùy Chỉnh Trong Word Bằng VBA Khi làm việc với các tài liệu Word tải về, bạn có thể gặp phải tình trạng tài liệu chứa quá nhiều Style tùy chỉnh không cần thiết, khiến việc định dạng trở nên rối rắm. Bài viết này sẽ hướng dẫn bạn cách xóa toàn bộ các Style tùy chỉnh và chỉ giữ lại các Style mặc định của Word bằng cách sử dụng VBA (Visual Basic for Applications). Bước 1: Kích hoạt Developer Tab trong Word Trước khi sử dụng VBA, bạn cần kích hoạt tab Developer : Mở Word . Vào File > Options . Trong cửa sổ Word Options , chọn Customize Ribbon . Trong danh sách bên phải, đánh dấu vào ô Developer và bấm OK . Bước 2: Mở VBA Editor Nhấn Alt + F11 để mở VBA Editor . Trong cửa sổ VBA, vào menu Insert > Module để tạo một module mới. Bước 3: Dán đoạn mã VBA Dán đoạn mã sau vào module mới: Sub DeleteCustomStyles() Dim s As Style For Each s In ActiveDocument.Styles If Not s.BuiltIn Then On Error Resume Next s.Delete ...
Đăng nhận xét
Đọc thêm

Tóm tắt Cuốn sách "Broken Money" của Lyn Alden

Cuốn sách "Broken Money" của Lyn Alden phân tích sự phát triển của tiền tệ qua các thời kỳ và những vấn đề của hệ thống tài chính hiện đại. Dưới đây là các ý tưởng và chủ đề chính của cuốn sách: 1. Sự tiến hóa của tiền tệ: Từ hàng hóa đến tiền pháp định: Ban đầu, các cộng đồng sử dụng các vật phẩm như vỏ sò, muối và lông thú làm phương tiện trao đổi. Với sự phát triển công nghệ, vàng và bạc trở thành tiền tệ chính do tính khan hiếm và bền vững. Sau đó, tiền pháp định (fiat) xuất hiện, được chính phủ phát hành mà không có sự bảo đảm bằng hàng hóa cụ thể. Shortform Ảnh hưởng của công nghệ: Sự ra đời của các công nghệ như điện báo đã thay đổi cách thức giao dịch và lưu trữ giá trị, dẫn đến sự chuyển đổi từ tiền tệ dựa trên hàng hóa sang tiền pháp định. Bitcoin News 2. Vấn đề của hệ thống tiền tệ hiện đại: Lạm phát và mất giá: Các chính phủ và ngân hàng trung ương có thể tạo ra tiền với chi phí thấp, dẫn đến lạm phát và làm giảm giá trị tiết kiệm của người dân. Võ Hoàng Hạc Sự...
Đăng nhận xét
Đọc thêm