Comme vous le savez déjà, Je Travaille (Presque) sur un frigo connecté Анкет IL ESESINE UNE APPLICATE PUR FAIRE LA MANENARTS DE CES FRIGOS DANS LES ЦЕНТРЫ AGRéés.
Переоборудование, J’ai Voulu Fournir un Document d’Aide pour l’Apilization de ce logiciel. J’aime Beaucoup écrire Documents encrown Mais Il Faut avouer Que ce format n’est pas Adapthe aux gens normaux, qui n’ont sans doute pas de logiciels адаптируется, что ouvrir genre de fichiers sur reeurs ordrimenturs.
Mon Application Est écrite en Qt et je me suis dit que QT Devait Bien être Capable d’afficher un Fichier Markdown Dans Un Super Widget Prévu Pour. Il s’est avéré que ce n’est pas aussi подключить и играть Que ça … Je vais vous montrer comment j’ai fait (et si vous avez une technique Magique, Dites-Moi tout en Комментарий!).
J’utilise Pyqt , Le Binding Python de Qt. LE CODE PRésenté ICI Sera donc en python mais vous pourrez Fearment L’Adapter en C ++.
Объект
Мон, но est d’avoir un fichier help.md à côté de mes fichiers *.py et de l’afficher dans un widget. Voici un Exemple de fichier avec de nombreuses fonctionnalités de markdown:
# YouFridge ## Présentation Blabla pour présenter le logiciel pour la maintenance du frigo connecté by [Younup](https://www.younup.fr/blog). > Pensez à bien remettre [les bières Younup](https://www.linkedin.com/feed/update/urn:li:activity:6745640505482219525/) au frais après la maintenance. ## Versions | Version | Changements | | ------- | ---------------- | | 1.0.0 | Blabla | | 1.0.1 | Oh no! | | 1.1.0 | Blablabla blabla | ## Code des erreurs ⚠️ Avez-vous bien branché la valise de diagnostic ? Vous avez peut-être un problème avec votre câble.
```bash > fridge connect Connecting to the fridge... Connexion established! Error code = 42 ```
| Code | Détails | | ---- | ------- | | 0 | OK | | 42 | Pas OK | 
(Примечание: Le rendu Montre 3 Blocs de Code Mais il S’agit Bien d’un Seul et même texte en markdown).
En Python, Je Souhaite ouvrir le fichier, charger le texte qu’il outient, et l’afficher avec un rendu rendu recore et si возможный Джоли.
УНУ РЕШЕНИЕ ПРОСТОЯ МАЙС IMPARFAITE: Qtextedit
La Première Solution EST Le Classique виджет Qtextedit . На Peut Lui Passer en Entrée du Texte Au формат Markdown. Voici un Code Afficher Mon Fichier help.md :
from PyQt5.QtWidgets import QApplication, QTextEdit
app = QApplication([])
text_edit = QTextEdit()
text_edit.setReadOnly(True)
with open('help.md', encoding='utf8') as f:
markdown = f.read()
text_edit.setMarkdown(markdown)
text_edit.show()
app.exec_()
El est Vating de Choisir l’Concodage à l’OUverture du fichier pul Que les et et Pictogrammes soient raflement lus.
На Attient:
Le rendu Est (Presque) Правильно, Bien Que Loin d’être Joli. Quelques défauts:
- Le Style du Texte ne peut pas être Changé.
- La seule astuce que j’ai truvée pour aigmenter la taille de la police est de faire
text_edit.zoomin (2). - Les Images Sans Texste Alternatif ne Sont Pas Affichees, Comme Si Leurs Chemins étaient Invalides.
- Il semble y avoir un bug d’ficalgage des tableaux s’ils sont précédés d’un bloc de code.
- Les Pictogrammes (qui sont des caractères spéciaux unicode) ne sont pas bien jolis (mais c’est peut-être use une obte de police de caractères).
- Le rendu des itations est Mauvais.
- Les Leens Ne Sont Pas Cliquables (Même si J’avoue ne pas avoir vraimt cherché si на Pouvait Changer ça).
Bref, c’est pas mal mais dans mon cas, ce n’était pas super retaisant.
L’Artillerie Lourde
En Quête d’un rendu Plus Joli, Je me suis intéressé à un Exemple Officiel de Qt (en C ++) утилизирующее LE Веб -двигатель de Qt. Ç n’a pas vraime été facile à Адаптер à mon projet mais j’ai pinfinement obtenu de très bons résultats.
Депрессии
En plus de Pyqt5 , Il Faut Installer Le Paquet Pyqtwebengine :
pip install PyQtWebEngine
Afficher une Page Web Avec QwebengineView
Après Quelques exprimentations, Je me suis dit que la Solution La Plus Simple était d’utiliser la Классе Qwebengineview qui hérite de Qwidget Анкет Ca me permettait de l’Intégrer Fearment Dans Mon Application à la Place de mon Qtextedit . Voici Un Script Pour Afficher www.example.com :
from PyQt5.QtCore import QUrl
from PyQt5.QtWidgets import QApplication
from PyQt5.QtWebEngineWidgets import QWebEngineView
app = QApplication([])
view = QWebEngineView()
view.setUrl(QUrl('http://www.example.com'))
view.show()
app.exec_()
Afficher du Markdown avec qwebengineview
Et Mastentant la Вопрос à 10 $: Comment remplacer www.example.com Пар Мон Фихье Отметка?
Бен на Peut Pas! IL FAUT Transformer Le Markdown En Html. Pour Cela, J’ai Plus Ou Moins Suivi Le Tutoriel Officiel de Qt:
- j’ai un fichier avec une page html шаблон
- je remplace le contenu d’un élément html par le texte en Отметка
- j’enregistre le résultat dans un nouveau fichier html
- J’affiche ce nouveau fichier html
- Une Bibliotheque JavaScript SE заряда de convertir le markdown en html
- Une Bibliotheque CSS SE заряда D’Ajouter Du Style à tout ce petit monde
J’ai réutilisé la bibliotheque javascript prosée par le tutoriel, Помечен Мейс J’ai Dro uver une autre bibliotheque css car celle proposée n’est plus доступен. J’ai Choisi github-markdown-css , Qui Fait Très Bien Le Taf.
J’avais dit que c’était l’artillerie lourde, не?
Ле -код
Si leded est assez simple au final, j’avoue m’être pas mal battu pour faire fonctionner tout ça , Mais Je Suis Très удовлетворяет Du résultat!
LE CODE Python:
from PyQt5.QtCore import QUrl
from PyQt5.QtGui import QDesktopServices
from PyQt5.QtWidgets import QApplication
from PyQt5.QtWebEngineWidgets import QWebEngineView, QWebEnginePage
class Page(QWebEnginePage):
def acceptNavigationRequest(self, new_url, navigation_type, is_main_frame):
if navigation_type == QWebEnginePage.NavigationTypeLinkClicked:
QDesktopServices.openUrl(new_url)
return False
else:
return super().acceptNavigationRequest(new_url, navigation_type, is_main_frame)
app = QApplication([])
with open('help.md', encoding='utf8') as f:
markdown = f.read()
with open('template.html', encoding='utf8') as f:
html = f.read()
with open('generated.html', 'w', encoding='utf8') as f:
generated = html.replace('markdown_content_placeholder', markdown)
f.write(generated)
view = QWebEngineView()
page = Page(view)
view.setPage(page)
view.load(QUrl('file:///generated.html'))
view.show()
app.exec_()
LA Page Шаблон.html :
markdown_content_placeholder
Et Тадам !
Quelques Détails
Je définis une версия Specialisée de Qwebenginepage Pour Pouvoir Ouvrir Les Leens Dans Le Navigateur par défaut du Système. Si je ne fais pas ça, les liens s’ouvrent dans le widget, sauf qu’il n’est pass de naviguer en arrière.
Vous avez peut-être remarqué l’Stuce Заменить (/>/g, '>') Налейте Que Les itations ne Partent Pas en Vrille. Il y Srement d’Outres améliorations de robustesse à faire.
Vous noterez enfin qu’il faut être connecté à internet pour recupérer les bibliothèques js et css. Si vous passez sous on tunnel, c’est le drame! Pensez à Rapatrier En Local Les Fichiers Si Votre Application doit fonctionner en Режим не подключения. Quelques tests M’ont toutefois montré que les fichiers lemblaient être récupérés d’un quelconque cache si je ne suis pas connecté à internet.
Вывод
Je Suis Très удовлетворяет решению de la obtenue avec Qwebengineview ! Манипулер un Qwidget Rend Très Simple L’Intégration et Le Platement de l’Aide dans l’ihm. Je Consere la souplesse d’ecrire du Markdown вылить écrire le fichier d’Aide et le rendu dans mon application est joli.
Оригинал: “https://dev.to/younup/afficher-du-markdown-dans-une-application-qt-2k5”