В моей документации по Sphinx я хотел бы показать снимки клавиш клавиатуры, когда я обращаюсь к ним в реструктурированном тексте.
Например, если я говорю: нажмите клавишу Enter. Я хотел бы показать изображение клавиши ввода в строке, вместо слова Enter.
Я видел такую графику во многих учебниках для обращения к клавишам клавиш, настройкам меню и т.д. Как они это делают? Возможно ли это сделать в Сфинксе?
Рассмотрим сначала использование семантической разметки для улучшения доступности. Сфинкс может выполнять роли : kbd:, : menuselection:, или : guilabel: в HTML. Затем вы можете применить CSS, чтобы штрихи клавиш отображались точно так, как вам хотелось бы, даже придать им внешний вид изображений, не создавая при этом их изображения.
Вы также можете использовать символы клавиатуры Unicode, но вы должны убедиться, что шрифт, который вы используете при рендеринге, поддерживает символ.
Примеры:
AFAIK, ни Sphinx, ни какой-либо из его вкладов не предоставляют возможности визуализации текста для изображений, за исключением aafigure, который создает изображения из ASCII-арта, но не является тем, что вы хотите.
Можно отображать встроенные изображения с помощью reStructuredText замещения mechamism.
Вы можете определить встроенную подстановку изображений следующим образом:
.. |text to substitute| image:: path/to/the/image.ext
Затем вы можете использовать подстановку везде, где захотите, в этом документе:
random text ... |text to substitute| ... more random text ...
В визуализированном документе |text to substitute| будет заменен (inline) изображением, на которое указывает path/to/the/image.ext.
В примере, следующий документ...
.. |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?
... дает следующий результат:
Еще лучше, вы можете использовать директиву изображения для настройки отображения изображения:
.. |key inline image| image:: https://cdn1.iconfinder.com/data/icons/hawcons/32/699610-icon-10-file-key-128.png
:height: 15px
:width: 50px
Вышеуказанная замена дает уменьшенную версию исходного изображения:
