Bỏ qua đến nội dung chính

Cách chia sẻ đoạn mã trên WordPress

Divi: chủ đề WordPress dễ sử dụng nhất

Divi: Chủ đề WordPress tốt nhất mọi thời đại!

hơn Tải xuống 600.000, Divi là chủ đề WordPress phổ biến nhất trên thế giới. Nó là hoàn chỉnh, dễ sử dụng và đi kèm với hơn 62 mẫu miễn phí. [Khuyến nghị]

Nếu bạn cung cấp phần mềm hoặc thủ thuật lập trình, bạn chắc chắn sẽ muốn chia sẻ đoạn mã. Cách chia sẻ đoạn mã này có thể giúp họ nhanh chóng thực hành. Tuy nhiên, theo mặc định, không thể chia sẻ mã với tất cả các định dạng cần thiết. Ý tôi là bằng cách định dạng là cú pháp tô sáng. Tuy nhiên, đó là một cái gì đó khá dễ dàng để làm.

May mắn thay, nếu bạn sử dụng divi, bạn nên biết rằng có một phương pháp tích hợp để thực hiện việc này một cách thủ công, để thêm các kiểu tùy chỉnh cho các đoạn này. Ngoài ra, có các plugin và tài nguyên của bên thứ ba thực sự có thể đơn giản hóa quá trình tạo các đoạn mã thẩm mỹ và chức năng trong Divi.

Trong hướng dẫn này, tôi sẽ chỉ cho bạn cách chia sẻ đoạn mã trong Divi (thủ công). Và tôi cũng sẽ chỉ cho bạn cách thiết kế đoạn mã với Divi Builder, nó sẽ đưa bạn đến cấp độ tiếp theo.

khảo sát

Dưới đây là tổng quan về các thiết kế đoạn trích có thể có trong hướng dẫn này.

Các hộp đoạn mã chứa các đoạn mã đã thêm chế độ thủ công.

Điều kiện tiên quyết cho hướng dẫn

Đối với hướng dẫn này, tất cả những gì bạn cần là chủ đề Divi, được cài đặt và kích hoạt. Chúng tôi sẽ xây dựng các ví dụ phân đoạn mã từ đầu bằng cách sử dụng Divi Builder trên một trang mới.

Để bắt đầu, hãy tạo một trang mới và triển khai Divi Builder trên giao diện chung. Sau đó chọn tùy chọn "Build From Zero".

Bây giờ bạn đã sẵn sàng để đi!

Thiết kế hộp tùy chỉnh cho đoạn mã trên Divi

Vì đoạn mã của chúng tôi nằm trong mô-đun văn bản, chúng tôi có thể sử dụng trình tạo divi để thêm các thành phần thiết kế vào và xung quanh mô-đun văn bản. Đối với thiết kế này, chúng tôi sẽ sử dụng một mô-đun tóm tắt để phục vụ như một thẻ cho đoạn mã. Sau đó, chúng ta sẽ định kiểu và định vị con trỏ ở bên trái mô-đun văn bản. Sau đó, chúng tôi sẽ cách điệu mô-đun văn bản của đoạn mã của chúng tôi.

Tạo phần, hàng và cột

Trước tiên chúng ta phải tạo một phần mới với một hàng cột.

Dễ dàng tạo trang web của bạn với Elementor

Elementor cho phép bạn dễ dàng tạo ra bất kỳ thiết kế trang web nào với một cái nhìn chuyên nghiệp. Ngừng trả tiền đắt cho những gì bạn có thể tự làm. [Miễn phí]

Sau đó cập nhật các tham số dòng như sau:

Chiều rộng máng xối: 1
Đệm tùy chỉnh: 0px ở trên cùng, 0px ở phía dưới

Thêm mô-đun văn bản

Sau đó thêm một mô-đun văn bản vào dòng.

Bạn có thể để nội dung theo mặc định. Chúng tôi sẽ thêm đoạn mã WordPress của chúng tôi sau. Hiện tại, hãy mô hình hóa mô-đun văn bản bằng cách cập nhật các tham số văn bản sau:

Màu nền: #eff0f1 Màu văn bản: #000000 Ký hiệu tùy chỉnh: 60px Đệm tùy chỉnh bên trái: 3% lên, 3% xuống, 3% trái, 3% phải

Chiều rộng của đường viền trên cùng: 10px Màu của đường viền trên cùng: #7cda24

Tạo nhãn đoạn mã

Để tạo nhãn đoạn mã, chúng tôi sẽ sử dụng mô-đun blurb. Điều này sẽ cho phép bạn thêm một biểu tượng văn bản trình bày (hoặc biểu tượng hình ảnh tùy chỉnh) bên cạnh ngôn ngữ mã được hiển thị.

Bạn đang tìm kiếm các plugin và plugin WordPress tốt nhất?

Tải xuống các plugin và WordPress chủ đề tốt nhất trên Envato và dễ dàng tạo trang web của bạn. Đã tải xuống nhiều hơn 49.720.000. [ĐỘC QUYỀN]

Tạo một mô-đun trình bày và kéo nó qua mô-đun văn bản. Sau đó cập nhật các cài đặt trình bày sau:

Tiêu đề: css Nội dung: [xóa nội dung hư cấu] Sử dụng biểu tượng: CÓ Biểu tượng: xem ảnh chụp màn hình

Sau đó cập nhật các thông số thiết kế như sau:

Màu nền: #1b2426 Màu biểu tượng: #7cda24 Vị trí / biểu tượng hình ảnh: bên trái Kích thước phông chữ: 20px Tiêu đề văn bản Màu sắc: #ffffff Tiêu đề kích thước văn bản: 16px

Chiều cao dòng tiêu đề: 1.3em Chiều rộng: 100px Lề tùy chỉnh: -44px ở dưới cùng, -50px ở bên trái Đệm tùy chỉnh: 10px ở trên cùng, 2px ở phía dưới, 15px ở bên trái, 15px ở bên phải

Phần trùng lặp để tạo thêm thiết kế hộp đoạn mã

Điều này hỗ trợ thiết kế hộp mã đầu tiên của chúng tôi. Chúng ta chỉ cần sao chép phần chứa thiết kế khối mã và cập nhật nhãn và màu sắc để tạo khối mã mới cho ngôn ngữ mã hóa khác. Điều này tất nhiên là tùy chọn, nhưng nếu bạn có kế hoạch thêm các đoạn mã khác nhau vào một trang, sẽ rất hữu ích khi có một bảng màu khác nhau cho mỗi trang.

Ví dụ: sao chép phần đó và mở cài đặt mô-đun Blurb.

Cập nhật tiêu đề thành "js" cho Javascript.

Sau đó nhấp chuột phải vào Màu sắc / Biểu tượng hình ảnh và chọn Tìm và Thay thế.

Cập nhật tùy chọn tìm kiếm và thay thế:

Trong: phần này Thay thế bằng: [màu mới] Thay thế tất cả: kiểm tra thay thế tất cả các giá trị tìm thấy

Bây giờ bạn có một khối đoạn mã mới cho đoạn mã JS.

Dưới đây là một ví dụ về các khu vực đoạn mã cho các loại mã phổ biến cho WordPress.

Sử dụng plugin Mã Prettify để thêm tô sáng cú pháp vào đoạn mã thủ công

Vâng, đúng là với phương pháp thủ công, bạn có thể ngay lập tức dán văn bản và vượt qua. các Mã Prettify sẽ ngay lập tức thêm mã được tô sáng vào tất cả các thẻ trước. Cái hay của plugin này là hoàn toàn không cần tùy chỉnh. Tất cả bạn phải làm là tải xuống và kích hoạt plugin.

Dưới đây là một ví dụ về mã sẽ trông như thế nào với Active Prettify Code.

Dễ dàng tạo Cửa hàng trực tuyến của bạn

Tải xuống miễn phí WooCommerce, các plugin thương mại điện tử tốt nhất để bán các sản phẩm vật lý và kỹ thuật số của bạn trên WordPress. [Đề xuất]

Mã Prettify đến từ Google và cũng được sử dụng để cách điệu tất cả các chiết xuất tuyệt vời trên stackoverflow.com.

Để hoàn thành

Hiển thị đoạn trích trên Divi không phải là khó khăn. Thêm thủ công đoạn mã bằng cách sử dụng thẻ mã trước và mã do WordPress cung cấp sẽ thực hiện công việc cho hầu hết các đoạn mã không phải là html, nhưng trước tiên bạn phải chạy đoạn mã thông qua bộ mã hóa html để chắc chắn. Ngoài ra, bạn có thể tùy chỉnh thêm kiểu văn bản của đoạn mã bằng cách sử dụng cài đặt mô-đun văn bản. Và đừng quên Code Prettify để thêm phần nổi bật vào đoạn mã thủ công của bạn.

Đối với những người thường xuyên chia sẻ đoạn mã, sử dụng plugin SyntaxHighlighter có lẽ là lựa chọn tốt nhất của bạn. Dù sao, bạn vẫn có thể thêm các thiết kế sáng tạo hơn vào đoạn trích của mình bằng Divi Builder.

Bonne cơ hội.

Bài viết này chứa comments 0

Để lại một bình luận

địa chỉ email của bạn sẽ không được công bố. Các trường bắt buộc được đánh dấu *

Trang web này sử dụng Akismet để giảm bớt không mong muốn. Tìm hiểu thêm về cách sử dụng dữ liệu nhận xét của bạn.

Trở lại đầu trang
2 cổ phiếu
cổ phiếu2
tweet
Enregistrer