Nếu bạn đã từng tham gia các vào các diễn đàn được lập với các mã nguồn như phpBB, myBB, vBullentin... thì hẵn bạn không xa lạ gì với BBCode. BBCode là viết tắt của Bulletin Board Code, là ngôn ngữ dùng để định dạng văn bản cho các bài đăng trên diễn đàn. Nếu như Markdown chỉ hỗ trợ các tính năng định dạng cơ bản thì với BBCode bạn có thể tùy biến rất nhiều định dạng nâng cao khác cho văn bản mà mình sẽ dần đề cập dưới đây.
1. Định dạng văn bản
Một trong những cấu trúc định dạng văn bản của BBcode được sử dụng trên Diễn đàn gồm có:
[b]Văn bản[/b] để in đậm.
[i]Văn bản[/i] để in nghiêng.
[u]Văn bản[/u] để gạch chân.
[s]Văn bản[/s] để gạch ngang
[f=tên-font]Văn bản[/f] để thay đổi kiểu chữ. (Vui lòng xem danh sách font chữ có thể sử dụng tại đây)
[size=20]Văn bản[/size] để thay đổi kích thước văn bản.
[color=màu]Văn bản[/color] để đổi màu chữ văn bản. Bạn có thể viết màu theo tên (ví dụ:red, green, yellow...), bằng mã màu HEX (ví dụ: #99cc33, #fff...) hoặc RGB, RGBA nếu muốn.
[hl]Văn bản[/hl] để làm nổi bật văn bản.
[hlc=màu]Văn bản[/hlc] để làm nổi bật Văn bản với màu tùy chỉnh.
[bc=màu]Nội dung[/bc] để thay đổi màu nền cho phần nội dung, ví dụ:
Văn bản này được viết trên nền có mã màu là rgba(255, 99, 71, 0.2)
[br] để ngắt dòng với khoảng cách lớn (20px), có thể áp dụng nhiều mã ngắt dòng để tăng khoảng cách giữa các phần nội dung.[SP] để tạo khoảng trắng giữa các chữ mà không ngắt dòng.
Bạn cũng có thể kết hợp nhiều cú pháp trên với nhau để tạo ta định dạng mong muốn. Ví dụ cú pháp [size=16][color=red]Roses are [b]red[/b][/color], [color=#0000FF]Violets are [b]blue[/b][/color][/size] sẽ cho kết quả là: Roses are red, Violets are blue
Lưu ý: Cú pháp của BBCode luôn bắt đầu bằng một thẻ mở và kết thúc bằng một thẻ đóng nằm trong các ngoặc vuông, ví dụ: [b][/b]. Khi bạn kết hợp nhiều cú pháp với nhau, hãy thận trọng để các thẻ lồng vào nhau theo thứ tự: thẻ nào mở trước thì phải được đóng sau, thẻ nào mở sau thì phải đóng trước.
2. Liên kết và hình ảnh
Để chèn liên kết vào bài viết, bạn sử dụng cấu trúc:
Đối với email, bạn dùng cấu trúc
Để chèn hình ảnh, bạn dùng cấu trúc [img]https://duong-dan-lien-ket.xyz/hinh-anh.jpg[/img].
Ví dụ: [img]https://i.pinimg.com/564x/0f/0d/da/0f0dda9228cb9223e07162e6112bc7f0.jpg[/img] sẽ chèn bông hoa Dã Quỳ tuyệt đẹp dưới đây.
Mẹo:
Bạn có thể liên kết hình ảnh với một liên kết đến trang web khác nếu muốn theo cấu trúc:
[url=https://duong-dan-lien-ket.xyz][img]https://duong-dan-hinh-anh.com/hinh-anh.png[/img][/url]
3. Canh giữa cho văn bản và hình ảnh
Để canh giữa cho văn bản hoặc hình ảnh, bạn có thể dùng cấu trúc: [center] Văn bản [/center] để hiển thị nội dung như ví dụ dưới đây:
Nhiễu điều phủ lấy giá gương
Người trong một nước phải thương nhau cùng.
Bầu ơi thương lấy bí cùng
Tuy rằng khác giống nhưng chung một giàn.
4. Khung thông báo
Bạn có thể dùng khung thông báo để làm nổi bật nội dung cần chú ý, bằng cách sử dụng cấu trúc sau:
[dnotice title={Tiêu đề} font=#555 bg=#e3f7fc border=#8ed9f6]{Nội dung}[/dnotice]
Trong đó:
font=#555 là màu chữ (bạn có thể đổi thành mã màu theo định dạng Hex bất kỳ)bg=#e3f7fc là màu nền của khung thông báo.border=#8ed9f6 là màu viền của khung thông báo.- Phần {Nội dung} của cấu trúc có thể dùng kèm với các cấu trúc định dạng văn bản hoặc chèn liên kết, hình ảnh.
Ví dụ: cấu trúc [dnotice title=Xin chào font=#555 bg=#e9ffd9 border=#a6ca8a]Cám ơn bạn đã tham gia Diễn đàn Cảnh quan Việt Nam[/dnotice] sẽ được hiển thị như dưới đây:
Xin chào: Cám ơn bạn đã tham gia Diễn đàn Cảnh quan Việt Nam
5. Spoiler - Ẩn/Hiện nội dung
Diễn đàn sử dụng 2 cấu trúc lệnh khác nhau dùng để ẩn/hiện nội dung khi người dùng nhấp vào phần tiêu đề văn bản như mô tả dưới đây.
Cấu trúc 1: [details={tiêu đề}] Nội dung [/details]
Cấu trúc dùng làm ví dụ sau sẽ được hiển thị như bên dưới: [details=Landscape là gì?] Landscape được hiểu là _cảnh quan_ hay _quang cảnh_.[/details]
Landscape là gì?
Landscape được hiểu là cảnh quan hay quang cảnh.
Cấu trúc 2: [spoiler title={tiêu đề}] Nội dung [/spoiler]
Cấu trúc dùng làm ví dụ sau sẽ được hiển thị như bên dưới: [spoiler title=Thủ đô của Việt Nam] Thủ đô Việt Nam hiện nay là thành phố [Hà Nội](https://vi.wikipedia.org/wiki/Hà_Nội) [/spoiler]
Thủ đô của Việt Nam
Nhấp để hiện
Thủ đô của Việt Nam
Nhấp để ẩn
Thủ đô Việt Nam hiện nay là thành phố Hà Nội
6. Chèn icon từ Fontawesome
Font Awesome được biết đến là một trong những thư viện chứa các font chữ là những ký hiệu về hình ảnh được sử dụng trong website. Nó có chứa hơn 1.600 icon miễn phí để bạn sử dụng cho việc trang trí bài viết thêm sinh động.
Cấu trúc sử dụng:
[fa] tên icon [/fa] sẽ cho ra icon tô đen, ví dụ [fa]hand-peace[/fa] sẽ cho kết quả là
[far] tên icon [/far] sẽ cho ra icon thông thường, ví dụ [far]hand-peace[/far] sẽ cho kết quả là
[fab]tên thương hiệu[/fab] sẽ cho ra icon của thương hiệu, ví dụ [fab]facebook-messenger[/fab] sẽ cho kết quả là
[fac=tùy-chỉnh] tên icon [/fac] để hiển thị các icon với hiệu ứng đặc biệt, bao gồm:
flip-vertical / flip-horizontal / flip-both
rotate-90 / rotate-180 / rotate-270
spin / pulse / border
2x / 3x / 4x / ... / 10x
Chỉ là một tiện ích nhỏ cho bạn để trang trí thêm cho bài viết. Các bạn có thể tìm kiếm danh sách các icon miễn phí của Fontawesome tại đây.
7. Chèn trình phát âm thanh
Diễn đàn hỗ trợ chèn trình phát âm thanh cho bạn nào có nhu cầu đăng tải podcast, sử dụng một trong những cấu trúc như dưới đây:
[audio mp3="song.mp3" ogg="song.ogg"]
[audio mp3="song.mp3"]
[audio ogg="song.ogg"]
[audio m4a="song.m4a"]
[audio wav="song.wav"]
[audio flac="song.flac"]
[audio webm="song.webm"]
[audio mp3="song.mp3" width="50"]
Ví dụ: Cấu trúc [audio mp3="https://sounds-mp3.com/mp3/0011707.mp3"] sẽ hiển thị như bên dưới:
