Addon 2x Code - Cải tiến trình soạn thảo Code XenForo 2 2.2.0

[PVS]

Code - Cải tiến trình soạn thảo Code XenForo 2 2.2.0

Addon này làm cho code bbcode và trình soạn thảo code có nhiều chức năng hơn bằng cách thêm các nút sao chép, mở rộng, thu gọn, thanh chỉnh sửa, số dòng code và khả năng đánh dấu các dòng.

Đây là một addon mã nguồn mở. Truy cập kho lưu trữ GitHub để biết mã nguồn.

​

Đánh dấu tiêu đề và dòng tùy chỉnh

Bây giờ bạn có thể chỉ định tiêu đề header block code tùy chỉnh. Ví dụ: người dùng có thể cung cấp tên tệp cho các block code thay vì viết nó dưới dạng văn bản hoặc đặt toàn bộ block code bên trong một trình hướng dẫn có tiêu đề tên tệp.

Hơn nữa, bạn thậm chí có thể làm nổi bật các dòng nhất định!

Tiêu đề tùy chỉnh và các dòng cần đánh dấu có thể được đặt qua hộp thoại "Insert code":

​

Bạn cũng có thể đặt tiêu đề và các dòng để đánh dấu trực tiếp trong trình soạn thảo văn bản bằng cách thêm các tham số title="..." và highlight="..." trong code bbcode.

Ví dụ: [code lang="php" title="My Custom Title"]<? .... ?>[/code] sẽ tạo ra block code này:

​

Di chuột qua tiêu đề tùy chỉnh sẽ hiển thị ngôn ngữ code:

​

Ví dụ về đánh dấu: [code lang="php" highlight="2, 5-8"]a log of code...[/code]

​

Các nút Mở rộng/Thu gọn

Nút mở rộng tăng chiều cao của block code một cách trơn tru cho đến khi tất cả code hiển thị. Nó chỉ hiển thị khi chiều cao block code ÍT hơn kích thước code thực tế.

Nút thu gọn giảm chiều cao của block code xuống chiều cao mặc định một cách trơn tru mà bạn có thể đặt trong style properties. Nó chỉ hiển thị khi chiều cao block code LỚN hơn chiều cao block code mặc định.

​

Cả nút mở rộng và nút thu gọn đều hiển thị khi chiều cao block code nằm trong giới hạn tối thiểu và tối đa và không hiển thị trên các block code nhỏ hơn chiều cao block code mặc định.

Chiều cao mặc định của block code có thể được đặt trong style properties (Phần "Code" bên dưới "Messages"):

​

Nút sao chép

Nút sao chép chỉ cần sao chép code ngay vào khay nhớ tạm của bạn:

​

Số dòng

Tất cả các block code đều có số dòng (tối đa 1000 dòng). Số dòng có thể được tắt thông qua style properties:

​

Thay đổi kích thước

Mỗi block code có chiều cao code lớn hơn chiều cao mặc định đều có thanh điều chỉnh. Nó cho phép người dùng thay đổi kích thước block code theo chiều dọc:

​

Ngôn ngữ phổ biến

Với addon giờ đây, bạn có thể đặt các ngôn ngữ phổ biến ngay sau tùy chọn "Allowed code languages" trong nhóm tùy chọn "Messages":

​

Ngôn ngữ mặc định

Bạn cũng có thể đặt ngôn ngữ code mặc định cho hộp thoại "Insert code" qua tùy chọn "Default code language" sau các ngôn ngữ phổ biến trong nhóm tùy chọn "Messages":

​

Class CSS block code tùy chỉnh

Có một tùy chọn để thêm một class CSS tùy chỉnh cho block code. Chỉ cần chỉ định thuộc tính BBcode class="..." cho điều đó. Bây giờ bạn có thể tạo kiểu cho các block code với class này. Đây là một ví dụ:

​

Chúc các bạn thành công.

Nguồn: xenforo.com​

 

[tranduong]

cho em xin cách khắc phục lỗi k hiển thị nút copy code với ạ! em cảm ơn!

 

[lolofifi]

cho em xin cách khắc phục lỗi k hiển thị nút copy code với ạ! em cảm ơn!View attachment 49872

Trong mẫu: CMTV_Code_bb_code_tag_code
Thay đổi các biểu tượng :

fa icon="fa-expand-alt
fa icon="fa-compress-alt
fa icon="fa-paste

Qua :

fa icon="fas-expand-alt
fa icon="fas-compress-alt
fa icon="fas-paste

 

[tranduong]

cảm ơn bạn ạ

 

[tranduong]

Trong mẫu: CMTV_Code_bb_code_tag_code
Thay đổi các biểu tượng :

fa icon="fa-expand-alt
fa icon="fa-compress-alt
fa icon="fa-paste

Qua :

fa icon="fas-expand-alt
fa icon="fas-compress-alt
fa icon="fas-paste

vẫn k đc ạ! do em cài theme của Theme house mới bị lỗi ạ! theme mặc định k có lỗi!

 

[lolofifi]

Kiểm tra với mã này trong extra.less

.bbCodeBlock-actions:before{
    font-family: 'Font Awesome 5 Pro';
}

 

[lolofifi]

Đối với mỗi biểu tượng :

.action .action--expand .action--hidden:before{
    font-family: 'Font Awesome 5 Pro';
    content: '\f065';
}
.action .action--collapse .action--hidden:before{
    font-family: 'Font Awesome 5 Pro';
    content: '\f066';
}
.action .action--copy:before{
    font-family: 'Font Awesome 5 Pro';
    content: '\f0ea';
}

 

[tranduong]

extra.less k có dòng này, em thêm vào vẫn k đc!

Kiểm tra với mã này trong extra.less

.bbCodeBlock-actions:before{
    font-family: 'Font Awesome 5 Pro';
}

 

[tranduong]

Đối với mỗi biểu tượng :

.action .action--expand .action--hidden:before{
    font-family: 'Font Awesome 5 Pro';
    content: '\f065';
}
.action .action--collapse .action--hidden:before{
    font-family: 'Font Awesome 5 Pro';
    content: '\f066';
}
.action .action--copy:before{
    font-family: 'Font Awesome 5 Pro';
    content: '\f0ea';
}

vẫn k ăn nhầm gì! thôi em gỡ addon luôn! ghihi

 

[lolofifi]

vẫn k ăn nhầm gì! thôi em gỡ addon luôn! ghihi

anh ấy không có gì lạ :

Unmaintained - Code

Description This addon makes code bbcode and code editor way more functional by adding copy, expand, collapse buttons, resizer bar, code line numbers and ability to highlight lines. This is an open source addon. Visit GitHub repository for...

xenforo.com

Bạn có cái này :

Addon 2x - [CC|T] Copy code - Thêm nút Copy Code cho XenForo 2

[CC|T] Copy code - Thêm nút Copy Code cho XenForo 2 2.1.0 Addon này sẽ cho phép bạn thêm một nút bảo mật để sao chép code vào clipboard. Khi bạn đã sao chép, bạn sẽ nhận được một pop-up thông báo trong diễn đàn: Có một số chế độ xuất hiện của pop-up: Apparence Molten Bounce Chúc...

vnxf.vn