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

PVS

Cộng Sự Đặc Biệt
Thành viên BQT
Tham gia
28/02/2015
Bài viết
14,659
Được Like
10,927
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.

func_features.png

Đá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":

highlight_lines_text_field.png

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="..."highlight="..." trong code bbcode.

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

1535718915924.png

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

1535719001075.png

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

highlighted_code_example.png

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.

expand-collapse.gif

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"):

1535723219891.png

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:

copy.gif

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:

1535721681160.png

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:

resizer.gif

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":

1535723658651.png


1535723826755.png

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":

1535743202787.png

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ụ:

custom_code_block_styling.png

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


Nguồn: xenforo.com​
 

Đính kèm

  • CMTV-Code-2.2.0.zip
    27.4 KB · Lượt xem: 17

tranduong

Thượng Đế
Tham gia
19/08/2021
Bài viết
11
Được Like
1
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!
1629544068506.png
 

tranduong

Thượng Đế
Tham gia
19/08/2021
Bài viết
11
Được Like
1
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

Thượng Đế
Tham gia
26/12/2019
Bài viết
17
Được Like
16
Kiểm tra với mã này trong extra.less
CSS:
.bbCodeBlock-actions:before{
    font-family: 'Font Awesome 5 Pro';
}
 

lolofifi

Thượng Đế
Tham gia
26/12/2019
Bài viết
17
Được Like
16
Đối với mỗi biểu tượng :

CSS:
.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

Thượng Đế
Tham gia
19/08/2021
Bài viết
11
Được Like
1
Đối với mỗi biểu tượng :

CSS:
.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

Thượng Đế
Tham gia
26/12/2019
Bài viết
17
Được Like
16
vẫn k ăn nhầm gì! thôi em gỡ addon luôn! ghihi
anh ấy không có gì lạ :

Bạn có cái này :
 
Sửa lần cuối:

Hướng dẫn sử dụng

XenForo 1 XenForo 2
Translate by PVS


Nhà Tài Trợ

Mút Xốp Không Gian
pallet Thịnh Phát
Điện Lạnh Thịnh Phát
Top Bottom