Làm thế nào tôi có thể hiển thị hình ảnh của các phím bàn phím trong dòng với văn bản bằng Nhân sư?

Question

Trong tài liệu Sphinx của tôi, tôi muốn hiển thị hình ảnh của các phím bàn phím khi tôi đề cập đến chúng trong văn bản được cấu trúc lại. Ví dụ, nếu tôi nói: Nhấn phím Enter. Tôi muốn hiển thị hình ảnh của phím Enter trong dòng, thay vì chỉ nhập từ.

Tôi đã thấy loại đồ họa này trong nhiều hướng dẫn để đề cập đến các phím bàn phím, tùy chọn trình đơn, v.v. Làm cách nào để thực hiện việc này? Tôi có thể làm điều này trong Sphinx không?

Answer 1

Cân nhắc đầu tiên sử dụng đánh dấu ngữ nghĩa để cải thiện trợ năng. Nhân sư có thể hiển thị các vai trò :kbd:, :menuselection: hoặc :guilabel: tới HTML. Sau đó, bạn có thể áp dụng CSS để làm cho các nét chính xuất hiện chính xác như bạn muốn, thậm chí cung cấp cho chúng sự xuất hiện của hình ảnh mà không thực sự làm cho chúng hình ảnh.

Bạn cũng có thể sử dụng Unicode keyboard characters, nhưng bạn phải đảm bảo phông chữ bạn sử dụng trong hiển thị hỗ trợ ký tự.

Ví dụ:

• trở lại: ⏎
• của Apple lệnh: ⌘
• tùy chọn: ⌥

AFAIK, không Sphinx hay bất kỳ những đóng góp của nó cung cấp bất kỳ khả năng để làm cho văn bản để hình ảnh, ngoại trừ aafigure tạo hình ảnh từ nghệ thuật ASCII nhưng không phải là những gì bạn muốn.

Answer 2

Có thể hiển thị hình ảnh nội tuyến bằng cách sử dụng số reStructuredText substitution.

Bạn có thể xác định một hình ảnh inline thay như thế này:

.. |text to substitute| image:: path/to/the/image.ext 

Sau đó, bạn có thể sử dụng thay thế bất cứ nơi nào bạn thích trong tài liệu của bạn như thế này:

random text ... |text to substitute| ... more random text ... 

Trong tài liệu trả lại, các |text to substitute| sẽ được thay thế (nội tuyến) bằng hình ảnh được chỉ bởi path/to/the/image.ext.

---

Trong ví dụ, các tài liệu sau đây ...

.. |key inline image| image:: https://cdn1.iconfinder.com/data/icons/hawcons/32/699610-icon-10-file-key-128.png 

This is a |key inline image| inline image, isn't it cool? 

... cung cấp cho các kết quả sau:

Thậm chí tốt hơn, bạn có thể sử dụng các tùy chọn để image directive tinh chỉnh hình ảnh hiển thị:

.. |key inline image| image:: https://cdn1.iconfinder.com/data/icons/hawcons/32/699610-icon-10-file-key-128.png 
         :height: 15px 
         :width: 50px 

Việc thay thế ở trên đưa ra một phiên bản thu gọn của ảnh gốc: