Giá như cách nhìn mã màu Sublime Text thật đơn giản!

Thường xuyên làm việc với các mã màu (CSS), trí nhớ không tốt và cũng như nhìn vào đám chữ chằng chịch chịch xxx hơn 8h mỗi ngày. Khiến cho bạn cũng trở nên hoa mắt và không biết là copy mã màu có đúng không.

Hoặc các biến màu của Sass có chính xác không.

À quên mình dùng Sublime Text để code nhé nên xin trình bài chia sẽ về cách show mã màu cho Sublime Text. Chứ một số app khác thì nó cũng rồi chẳng hạn bác PHPstorm (nhưng tôi không thích nó) vì sao ư bởi vì mình thích thôi. :D

https://www.jetbrains.com/phpstorm/

Package Control

Đầu tiên các bác install Package control cho sublime nhé, mấy bác xem ở đây:

https://packagecontrol.io/installation

Ai sử dụng phiên bản nào thì chơi phiên bản đó.

Xong rồi thì các bác chỉ việc gõ Command + Shift + P

Intstall Package nó sẽ hiện ra như hình, enter và cài cái gì mình muốn nhá.

alt text

cái này sẽ giúp các bác install thêm plugin nào mà mấy bác thích. Tháo nó ra thì Package remove nhé.

Không thi vào Preferences > Browse Packages ... mà xoá nó cũng nằm trong này thôi.

install Color Highlighter

Như ở trên các bạn nhấn tổ hợp phím Command + Shift + P Enter

Sau đó gõ Color Highlighter tìm thấy nó thì cài nó thôi bla bla ...

alt text

Sublime Text → Preferences → Package Settings → Color Highlighter → Settings–User

Rồi có nó rồi thì các bác thử xem có gì khác biệt không nhé.

Nó có cái line gạch chân nhỏ nhỏ. Để highlighter nó thì các bác setup thêm cái này trong Settings-User nhá:

{
    "ha_style": "filled"
}

Kết quả của sass + css
alt text

Muốn xem bác nước ngoài hướng dẫn thì ở đây nhé.
http://wesbos.com/highlight-css-colours-in-sublime-text/

Install GutterColor

Cũng thế thôi Command + Shift + P Enter

Sau đó gõ GutterColor tìm thấy nó thì cài nó thôi bla bla ...

Sublime Text → Preferences → Package Settings → Color Highlighter → Settings–User

alt text

Chổ convert_path là đường dẫn đến ImageMagick

Đến đây nó vẫn chưa có gì khác biệt, và bắt đầu hơi rất rối chút đỉnh.

Nếu các bạn đã biết đến bạn brew brew cask thì mọi việc sẽ đơn giản thôi, còn chưa thì có thể cài nó nhé:

Sau khi cài đặt được brew thì bạn gõ:

brew search imagemagick or brew cask search imagemagick

alt text

Okay có nó rồi cài nó thôi.

brew search imagemagick

alt text

Nãy giờ nói cho lắm thế mà có ai thắc mắc là thằng brew + brew cask nó giúp khỉ mẹ gì trong việc này không nhĩ?
Nói thiệt thì không nhưng nó giúp mình cài đặt app cũng như mấy thứ linh tinh đến mấy thứ quan trọng trong Macbook của mình.

Kiểm tra brew đã có hay chưa

brew list or brew cask list

alt text

đã có rồi cột thứ 2 hàng thứ 2 từ dưới đếm lên.

which convert

để xem cái thư mục convert của imagemagick đã có chưa. Có rồi thì bạn copy đường dẫn để setup cho Setting User nhé.

alt text

Okay đã xong thì các bạn mở Sublime Text lên và tận hưởng
alt text

Lưu ý thằng GutterColor bì đụng với thằng GitGutter nên các bạn chọn một trong hay cách hiển thị màu cho mã màu thôi nhé. (Một vợ 1 chồng hạnh phúc bền lâu.)

Có bài của bác Tây nữa nhá mấy bác.

Kết luận

Bạn có thể làm gì nếu chỉ nhìn vào mã màu của Sublime Text mà không biết nó là màu gì?

http://wesbos.com/highlight-css-colours-in-sublime-text/

http://wesbos.com/css-gutter-color-sublime-text/

https://www.facebook.com/plugins/post.php?href=https%3A%2F%2Fwww.facebook.com%2Ftudscss%2Fposts%2F542498172623115&width=500

Những link này là câu trả lời cho bạn.

Bình luận


White
{{ comment.user.name }}
Bỏ hay Hay
{{comment.like_count}}
Male avatar
{{ comment_error }}
Hủy
   

Hiển thị thử

Chỉnh sửa

White

tuds

32 bài viết.
93 người follow
Kipalog
{{userFollowed ? 'Following' : 'Follow'}}
Cùng một tác giả
White
40 5
Dạo gần đây nhà mình hay mất mạng, mà ai cũng biết rồi dân IT, Design, Gaming, XXX, mà không có internet thì hỡi ơi cứ như là sống ở thời kì đồ đá....
tuds viết 12 tháng trước
40 5
White
35 7
0.1 Intro Trong series này các bạn sẽ được tiếp cận từ đầu đến đích việc của một webiste tĩnh được làm như thế lào. Hứa hẹn nhiều điều thầm kính t...
tuds viết hơn 1 năm trước
35 7
White
17 2
Tiêu đề viết cho vui vậy chứ 2 chúng nó ly dị lâu rồi, đứa thì đi theo anh chiều cao vh height, đứa thì cưới chị chiều ngang vw width. 1 vw = 1% c...
tuds viết gần 2 năm trước
17 2
Bài viết liên quan
White
4 3
Đây là vấn đề đau đầu và thường gây tranh cải nhất trong khi bạn làm việc nhóm hoặc cả chính những lúc bạn muốn xem lại code của mình. Thối quen l...
tuds viết gần 2 năm trước
4 3
White
1 7
Tư duy lập trình, tư duy toán học và không biết đã có ai từng nghe qua tư duy tội phạm chưa? Hồi trước có một anh bạn giới thiệu với mình về tư duy...
tuds viết hơn 1 năm trước
1 7
{{like_count}}

kipalog

{{ comment_count }}

bình luận

{{liked ? "Đã kipalog" : "Kipalog"}}


White
{{userFollowed ? 'Following' : 'Follow'}}
32 bài viết.
93 người follow

 Đầu mục bài viết

Vẫn còn nữa! x

Kipalog vẫn còn rất nhiều bài viết hay và chủ đề thú vị chờ bạn khám phá!