Nếu bạn cung cấp bất kỳ phần mềm hoặc mẹo lập trình nào, chắc chắn bạn sẽ muốn chia sẻ một số đoạn mã. Cách chia sẻ đoạn mã này có thể giúp họ thiết lập một bài tập nhanh chóng. Tuy nhiên, không thể chia sẻ mã với tất cả các định dạng cần thiết theo mặc định. Ý tôi định dạng là tô sáng cú pháp. Tuy nhiên, đó là một cái gì đó khá dễ thực hiện.
May mắn thay, nếu sử dụng divi, bạn nên biết rằng có một cách tích hợp sẵn để thực hiện việc này theo cách thủ công, đó là thêm kiểu tùy chỉnh vào các đoạn mã này. Ngoài ra còn có các plugin và ressources các ứng dụng 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 chức năng và thẩm mỹ trong Divi.
Trong hướng dẫn này, tôi sẽ chỉ cho bạn cách chia sẻ các đoạn mã trong Divi (theo cách thủ công). Và tôi cũng sẽ chỉ cho bạn cách thiết kế các khối đoạn mã với Divi Builder, sẽ đưa bạn lê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 mã có thể có trong hướng dẫn này.
Hộp đoạn mã với các đoạn mã được 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ài đặt và đang hoạt động. Chúng tôi sẽ tạo các đoạn mã mẫu từ đầu bằng Trình tạo Divi 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 công khai. Sau đó chọn tùy chọn "Xây dựng từ đầu".
Bây giờ bạn đã sẵn sàng để đi!
Thiết kế hộp được cá nhân hóa cho các đ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 yếu tố thiết kế vào mô-đun văn bản (và xung quanh nó). Đối với thiết kế này, chúng tôi sẽ sử dụng mô-đun tóm tắt để làm nhãn cho đoạn mã. Tiếp theo, chúng ta sẽ tạo kiểu và định vị con trỏ ở bên trái của mô-đun văn bản. Tiếp theo, chúng tôi sẽ tạo kiểu cho 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.
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ể để lại nội dung theo mặc định. Chúng tôi sẽ thêm đoạn mã WordPress vào sau. Bây giờ, hãy lập mô hình 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 Lề tùy chỉnh: 60px bên trái Phần đệm tùy chỉnh: 3% trên cùng, 3% dưới cùng, 3% trái, 3% phải
Chiều rộng đường viền trên: 10px Màu đường viền trên: # 7cda24
Tạo nhãn đoạn mã
Để tạo nhãn đoạn mã, chúng ta sẽ sử dụng một mô-đun blurb. Điều này sẽ cho phép bạn thêm biểu tượng văn bản làm nổi bật (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ị.
Tạo mô-đun bản trình bày và kéo nó lên trên mô-đun văn bản. Sau đó cập nhật các cài đặt bản 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 Hình ảnh / Biểu tượng Vị trí: bên trái Kích thước phông chữ: 20px Văn bản Màu tiêu đề: #ffffff Kích thước văn bản Tiêu đề: 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 Đệm tùy chỉnh bên trái: 10px Trên, 2px Dưới, 15px Trái, 15px Phải
Phần nhân bản để tạo nhiều thiết kế hộp đoạn mã hơn
Điều này hỗ trợ thiết kế hộp mã đầu tiên của chúng tôi. Bây giờ 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 một khối mã mới cho một 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 định thêm các đoạn mã khác nhau vào một trang, thì sẽ giúp bạn có một bảng màu khác nhau cho mỗi đoạn.
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 Hình ảnh / Màu biểu tượng 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.
Đây là một ví dụ về các hộp đ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 đánh dấu 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 yêu cầu tùy chỉnh. Tất cả những gì 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.
Mã Prettify đến từ Google và cũng được sử dụng để cách điệu tất cả các đoạn trích tuyệt vời đó trên stackoverflow.com.
Để hoàn thành
Việc xem các đoạn mã trên Divi không có gì khó khăn. Việc thêm các đoạn mã theo cách thủ công bằng cách sử dụng các thẻ mã trước và mã Word do WordPress cung cấp sẽ thực hiện công việc đối với hầu hết các đoạn mã không phải html, nhưng trước tiên bạn cần 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 đ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 điểm nhấn cho các đ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 trích, sử dụng plugin SyntaxHighlighter có lẽ là lựa chọn tốt nhất của bạn. Dù bằng cách nào, bạn sẽ luôn có tùy chọn để thêm nhiều thiết kế sáng tạo hơn vào các đoạn trích của mình bằng Divi Builder.
Bonne cơ hội.
