Thay đổi màu nhận xét trong trình chỉnh sửa Atom

Question

Tôi muốn thay đổi màu của nhận xét trong trình chỉnh sửa Atom. Từ một chút googling, tôi thấy tôi có thể đặt sau trong .atom/styles.less tập tin của tôi:

atom-text-editor::shadow .comment { 
    color: #ffffaa; 
} 

Đó là tuyệt vời - bây giờ tôi có ý kiến ​​vàng tươi mà đòi hỏi được chú ý hơn là mờ dần vào nền . Vấn đề là nó sẽ trông giống như dưới đây

Như bạn thấy, màu sắc văn bản của nhận xét đã thay đổi, nhưng delimiters bình luận và liên kết trong bình luận ở lại mặc định gần như vô hình xám , trông hơi ngớ ngẩn một chút.

Câu hỏi của tôi là (1) làm cách nào để thay đổi màu của các mục này và quan trọng hơn (2) tôi có thể tìm cách thay đổi màu của các mục này ở đâu?

Xin lưu ý rằng tôi không phải là một lập trình viên web và không biết gì về CSS hoặc bất kỳ công nghệ liên quan nào. Do đó, tôi đang tìm kiếm một giải pháp từng bước một, trái ngược với các giải pháp được tìm thấy, ví dụ, trong các câu trả lời cho this question, giả định một lượng đáng kể nền trong các hoạt động bên trong của công cụ này.

Answer 1

Để tìm hiểu các lớp CSS của bất kỳ yếu tố bạn muốn phong cách, hãy làm theo các bước sau trong trình soạn thảo:

1. Sử dụng con trỏ của bạn để làm nổi bật các yếu tố mà bạn muốn kiểm tra. Tôi đang làm theo ví dụ của bạn về một dấu gạch chéo kép (tức là một bình luận) ở đây.
2. Nhấn Ctrl + Alt + phím Shift +P (hoặc Cmd + Alt + P trên OS X). Một cửa sổ bật lên sẽ cho bạn biết tất cả các lớp của phần tử đó. Thông thường, đó là dòng cuối cùng của thông báo mà chúng tôi quan tâm. Đối với //, nó là comment.line.double-slash.js.
3. Bỏ qua dấu chấm cuối cùng và mọi thứ theo sau, vì việc giữ nó sẽ chỉ áp dụng các thay đổi của bạn cho một loại tệp cụ thể (js trong trường hợp này). Giờ hãy thêm một dấu chấm. Chuỗi còn lại là phần tử chúng tôi muốn tạo kiểu: .comment.line.double-slash.

Mở .atom/styles.less bằng cách mở pallette lệnh (Ctrl + phím Shift + P trên Windows/Linux hoặc Cmd + phím Shift + P trên OSX) và tìm kiếm "Ứng dụng : Mở Biểu định kiểu của bạn ".

Nối những dòng này để .atom/styles.less, nếu chưa có mặt:

atom-text-editor::shadow { 
    // custom comment styling goes here 
} 

Bên trong dấu ngoặc bạn có thể đặt CSS/code LESS cho bất kỳ yếu tố bạn muốn tùy chỉnh.

atom-text-editor::shadow { 
    .comment.line.double-slash { 
     color: #ffffaa; 
    } 
} 

---

lời khuyên bổ sung: bạn có thể liệt kê các định yếu tố như một danh sách bằng dấu phẩy và không gian tách ra, nếu những thay đổi tương tự nên áp dụng đối với họ. Vì vậy, nếu bạn muốn tạo liên kết cùng một màu sắc như ý kiến, có hai khả năng:

.comment.line.double-slash { 
    color: #ffffaa; 
} 
.markup.underline.link.hyperlink { // I removed the '.https' to apply this to all protocols 
    color: #ffffaa; 
} 

hoặc

.comment.line.double-slash, .markup.underline.link.hyperlink { 
    color: #ffffaa; 
} 

Với tên lớp miễn là chúng được sử dụng ở đây, tôi muốn lựa chọn đầu tiên để dễ đọc. Nhưng đó là tùy theo sự lựa chọn của bạn.

Answer 2

Cú pháp được thay đổi trong 1,14. Bây giờ, bạn cần phải sử dụng này cho việc thay đổi màu bình luận

atom-text-editor .syntax--comment { 
     color: #228B22; 
} 

Answer 3

Sử dụng 1.14.4:

// This styles comment text 
atom-text-editor .syntax--comment { 
    color: #53FFA1; 
} 

// This styles comment punctuation (i.e. //, and /*...*/) 
.syntax--punctuation.syntax--definition.syntax--comment { 
    color: #008C3F; 
}