Cách làm khung code có nút copy kèm thông báo cực cool 2021

Home » Module » Thủ thuật web code » Code html

2021-07-20, 3:03 PM

Những ai đã từng thiết kế hoặc xây dựng trang web để chia sẻ các kiến thức liên quan tới lập trình thì ắt hẵn không còn xa lạ gì về khung chứa code, javascript, css or đơn giản chỉ là một đoạn văn bản.

Nó không những tiện dụng mà còn làm web của bạn trở nên gọn đẹp và chuyên nghiệp hơn. Trên internet có rất nhiều bài viết chia sẻ về cách làm khung chứa code đẹp cho trang web.

Ở bài viết này VF Share cũng chia sẻ thêm cho các bạn một kiểu khung chứa code cực kỳ đẹp mắt và gọn nhẹ cho web. Nó không đơn thuần chỉ là khung chứa mà nó còn được tích hợp thêm một số tính năng hữu ích như:

Kèm theo nút copy nội dung trong khung
Hiệu ứng màu nền tạo nét đẹp độc lạ cho khung chứa
Màu sắc cho nội dung trong khung chứa
Có cả thông báo khi bạn copy thành công nhé
Sửa file trực tiếp trong khung chứa v.v...

Và đương nhiên là bài viết này VF Share cũng tham khảo lại các code được chia sẻ trên mạng thôi chứ không phải hay ho tài giỏi mà viết ra được ^^! chỉ là thêm bớt một số cái cho nó lạ mắt thôi, chia sẻ lại cho bạn nào đang cần và chưa biết. Anh chị nào biết rồi xin bỏ qua bài viết hoặc nếu có ý kiến vui lòng góp ý một cách nhiệt tình thêm để mọi người cùng hiểu ạ! (Ở bài này xin phép các anh chị cho em phép được múa vài đường rìu qua mắt các anh chị ạ)

Đầu tiên các bạn cần có file css như thế này"
Các bạn copy và tạo một file css đặt vào nơi khung xuất hiện hoặc có thể đặt trực tiếp lên trước thẻ </head>

Css Copy

<style>
.codeHeader{border:1px solid #e0e0e0;border-bottom:0;text-align:right;padding:2px}
.copy-text{font-size:14px;cursor:pointer;color:#e6e6e6;padding:0 12px;border-left:1px solid #e0e0e0}
.copy-text:hover{color:#707070}
.the-text{float:left;padding:0 0 0 10px;color:#d6d6d6;font-weight:bold}
pre.code{display:block;background-color:#565b63;max-height:210px;font-size:14px;text-align:left;overflow:overlay;border:1px solid #d3d6db;margin:auto;padding:16px;line-height:21px;white-space:normal;/*vfshare.net*/;font-style:italic;-webkit-user-modify:read-write-plaintext-only;}
.clo{background-color:#506073;color:#ccc9c9}
.css{background-color:#4c9e91;color:#9bd2c8}
.css:hover{background-color:#597571;color:#fff}
.java{background-color:#566a8a;color:#dcd288}
.java:hover{background-color:#808fa9;color:#fff}
.html{background-color:#8b7ca0;color:#ae9fff}
.html:hover{background-color:#61596d;color:#fff}
</style>

Nhắc nhỏ:

Đây là file css mình thêm tổng thể cho tất cả các kiểu khung ở trong bài viết này nhé, các bạn có thể lọc hược lượt bỏ theo ý của các bạn nha. Nếu như các bạn biết thiết lập css hãy sửa lại tùy theo ý của mình còn nếu không hiểu thì bê cả vào, chứ không nhỡ may sửa lại bị lỗi ^^!

Tiếp theo là chúng ta sẽ có đoạn javascript này
Các bạn chèn đoạn javascript trước thẻ </head> giống như file css nhé

Javascript Copy

<script src="https://vfshare.net/js/khung-code-2.1.1jquery.min.js"></script>
<script src="https://vfshare.net/js/khung-code-clipboard.js"></script>
<script>
$(function(){
new Clipboard('.copy-text');
});
</script>

Mình khuyên các bạn nên lưu lại 2 link javascript trên thành file và upload lên web của các bạn để dùng cho ổn định, chứ cứ để nguyên thế, nhiều lúc không may gặp phải lỗi.

Dưới đây là 2 kiểu code chèn nội dung (có pha chút javascrip)
Các bạn chèn đoạn code dưới trong bài viết của các bạn lúc viết bài nhé, đặt nội dung cần đóng khung vào giữa 2 thẻ nội dung

Html Copy

Đây là kiểu code đơn giản và không có thông báo

<div class="codeHeader clo"><span class="the-text">Tên nội dung</span><a class="copy-text" data-clipboard-target="#p1" href="javascript:void(0);"><i class="fa fa-files-o"></i> Copy</a>
<pre class="code clo" id="p1">
<!--<code>-->nội dung<!--<code>-->
</pre></div><br />

Nếu muốn có hiệu ứng màu thì các bạn chọn code dưới đây và tùy chỉnh theo hướng dẫn nhé

Html Copy

Đây là kiểu code có hiệu ứng màu

<div class="codeHeader css"><span class="the-text">Tên nội dung</span><a class="copy-text" data-clipboard-target="#p1" href="javascript:void(0);" onClick = "alert('Đã sao chép bạn có thể dán');"><i class="fa fa-files-o"></i> Copy</a>
<pre class="code css" id="p1">
<!--<code>-->nội dung<!--<code>-->
</pre></div><br />

Để thêm nhiều khung khác nhau trong một bài viết thì các bạn tùy chỉnh như sau:

id="1" thêm khung thì tăng chỉnh id (ví dụ id="2.3.4.5.6...")
data-clipboard-target="#p1" thêm khung thì tăng chỉnh data-clipboard-target (ví dụ: data-clipboard-target="#p2.#p3.#p4.#p5.#p6...")
Nếu muốn bật or tắt thông báo thì các bạn chỉ cần thêm hoặc bỏ bớt đoạn code được bôi đậm phía sau thẻ href="javascript:void(0);" onClick = "alert('Đã sao chép bạn có thể dán');"
Các bạn thay thế đoạn text "Tên nội dung" bằng tên của code trong khung (ví dụ: Text, Css, Html, Javascrip...)
Phần code có hiệu ứng màu thì các bạn cần tìm và tùy chỉnh các class sao cho phù hợp (ví dụ: nếu chèn css thì các bạn tìm và thay class="codeHeader css" và class="code css", chèn html thì các bạn thay là class="codeHeader html" và class="code html", chèn javascript thì thay là class="codeHeader java" và class="code java" ...)

Lưu ý:

Khi các bạn chèn code trong khung chứa các bạn cần phải chuyển đổi code thành dạng đã được mã hóa cho bài viết thì mới được, nếu các bạn không chuyển đổi thì bài viết sẽ bị lỗi

Text Copy

Ví dụ: <source src="mov_bbb.mp4" type="video/mp4">
Chúng ta sẽ mã hóa thành dạng sau:  &lt;source src=&quot;mov_bbb.mp4&quot; type=&quot;video/mp4&quot;&gt; 
Thay thế: &lt; và &gt; thay cho dấu < > và &quot; &quot; thay cho dấu " "

Các bạn yên tâm ở web mình đã chuẩn bị sẵn công cụ chuyển đổi cho các bạn rồi, rất tiện lợi cho những bạn nào đang lập trình web, các bạn truy cập vào tools của web vàn chọn tool Mã hóa code, html cho bài viết sau đó các bạn copy và dán đoạn code cần chuyển để vào khung rồi copy kết quả dán vào khung chứa trong bài viết

Vậy là các bạn đã có một bộ khung chứa code tuyệt đẹp cho web của các bạn rồi (tham khảo demo nhé)

Từ khóa: Tạo khung chua code 2021, huong dan tao khung chua code cho web, khung chua code kem nut copy cho web, khung chua code co nut copy va thong bao, khung chứa code nút copy và thông báo, khung chứa code màu sắc đẹp, tạo khung chứa code có màu cho web, tạo khung chứa code kèm thông báo, khung chứa code có thể sửa trực tiếp, khung chứa văn bản đẹp.

Administrators

Cảnh báo:

Khi bạn để lại bình luận vui lòng không spam, không dùng những từ ngữ thô tục lăng mạ người khác.
Nếu bạn copy bài của người khác hoặc từ trang khác, xin vui lòng điền tên tác giả và nguồn của nội dung bài viết nhé...!
Các bài viết trên VF Share chỉ mang tính chất tham khảo, bạn nên cân nhắc kỹ lưỡng trước khi xem hoặc tải nội dung bài viết, cẩn thận lừa đảo và virus. Hãy quét virus trước khi cài đặt bất cứ thứ gì.
Chúng tôi sẽ không chịu trách nhiệm với các bài viết do thành viên đăng lên trên các kênh của VF Share.
Nếu trường hợp bạn phát hiện bài viết là hình thức lừa đảo hoặc nội dung bài viết sai thực tế, bạn vui lòng gửi báo cáo tới admin để được giải quyết, chúng tôi sẽ xử lý nghiêm các vấn đề vi phạm.
VF Share luôn hướng tới mục tiêu cộng đồng giao lưu vui vẻ, lịch sự, nhiệt tình.
Hãy để lại cảm nhận của bạn, chúng tôi vui vẻ đón nhận và sẽ cố gắng phát huy trang web một cách tốt nhất để phục vụ các bạn.
Cảm ơn bạn đã luôn quan tâm và ủng hộ VF Share, chúc bạn một ngày làm việc hiệu quả!

code, Code copy, Khung code, WebSite, Lệnh java | 271 | Code html

Tổng số bình luận: 0