1 line
65 KiB
JSON
1 line
65 KiB
JSON
|
{"config":{"indexing":"full","lang":["en"],"min_search_length":3,"prebuild_index":false,"separator":"[\\s\\-]+"},"docs":[{"location":"","text":"Terminal et IDE dans Mkdocs \u2693\ufe0e Introduction \u2693\ufe0e Pyodide-Mkdocs est une solution technique permettant de cr\u00e9er un cours interactif \u00e0 partir d'un site g\u00e9n\u00e9r\u00e9 par Mkdocs. Il permet d'int\u00e9grer, dans le navigateur, c\u00f4t\u00e9 client : une console Python ; un \u00e9diteur de code ; un juge en ligne associ\u00e9 \u00e0 des corrig\u00e9s. Garantie : sans cookie sans inscription cr\u00e9\u00e9 par un enseignant pour les enseignants Solution La technologie permettant ce tour de force s'appelle Pyodide . Pyodide utilise WebAssembly pour faire le lien entre Python et Javascript et proposer un environnement permettant de manipuler le DOM avec Python, ou de manipuler Python avec Javascript. Aper\u00e7u \u2693\ufe0e Lancer # testsbksl-nlbksl-nlassert dentiste(\"j'ai mal\") == 'aia'bksl-nlassert dentiste(\"il fait chaud\") == 'iaiau'bksl-nlassert dentiste(\"\") == ''bksl-nlbksl-nlbksl-nl# pas d'autres testsbksl-nlbksl-nlassert dentiste(\"a\"py-str20 + \"b\"py-str10 + \"e\") == 'a'py-str20 + 'e'bksl-nlassert dentiste(\"b\"py-str10 + \"e\" + \"a\"py-str20) == 'e' + 'a'py-str20 bksl-nlassert dentiste(\"ab\"py-str10) == 'a'py-str10bksl-nlassert dentiste(\"aeiouy\"py-str10) == 'aeiouy'py-str10bksl-nlassert dentiste(\"z\"py-str100 + 'y') == 'y'bksl-nlbksl-nl Valider 5/5 T\u00e9l\u00e9charger T\u00e9l\u00e9verser Recharger Sauvegarder voyelles = ['a', 'e', 'i', 'o', 'u', 'y']bksl-nlbksl-nldef dentiste(texte):bksl-nl passbksl-nlbksl-nlassert dentiste(\"j'ai mal\") == 'aia'bksl-nlassert dentiste(\"il fait chaud\") == 'iaiau'bksl-nlassert dentiste(\"\") == ''bksl-nlbksl-nl voyelles = ['a', 'e', 'i', 'o', 'u', 'y']bksl-nlbksl-nldef dentiste(texte):bksl-nl resultat = ''bksl-nl for lettre in texte:bksl-nl if lettre in voyelles:bksl-nl resultat = resultat + lettrebksl-nl return resultatbksl-nlbksl-nl A Une premi\u00e8re remarque Ceci est un exercice classique. D'autres d\u00e9tails On pourrait repr\u00e9senter la situation dans un tableau : a b c 1 2 3 Z Installation \u2693\ufe0e On part d'une installation comme indiqu\u00e9 sur [https://ens-fr.gitlab.io/mkdocs/] avec le plugin macro , pr\u00e9alablement install\u00e9. L'installation demande de rajouter \u00e0 cette configuration les \u00e9l\u00e9ments suivants. Modification : fichier YML mkdocs.yml ; fichier de macro main.py ; Ajout : un dossier my_theme_customizations/ \u00e0 la racine du projet Mkdocs ; un template HTML my_theme_customizations/main.html ; un fichier CSS docs/xtra/stylesheets/pyoditeur.css ; deux fichiers Javascript docs/xtra/javascripts/interpreter.js et my_theme_customizations/js/ide.js ; deux fichiers Markdown docs/xtra/start.md et docs/xtra/end.md . Fichier YML mkdocs.yml \u2693\ufe0e Ajoutez les lignes surlign\u00e9es dans votre fichier mkdocs.yml . site_name : \"Terminal et REPL dans Mkdocs\" ... theme : name : material custom_dir : my_theme_customizations/ ... extra_javascript : - xtra/javascripts/mathjax-config.js # MathJax - javascripts/config.js - https://polyfill.io/v3/polyfill.min.js?features=es6 - https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js - xtra/javascripts/interpreter.js extra_css : - xtra/stylesheets/pyoditeur.css - xtra/stylesheets/ajustements.css # ajustements Fichier macro Python main.py \u2693\ufe0e \u00c0 votre fichier main.py , ajoutez les lignes du fichier main.py . Cr\u00e9ation du dossier custom_dir \u2693\ufe0e N'oubliez pas de cr\u00e9er le dossier my_theme_customizations/ \u00e0 la racine du projet Mkdocs . Dans ce dossier, ajoutez le template Jinja main.html : {% extends \"base.html\" %} {% block content %} {{ super () }} <script src=\" {{ base_url }} /js/ide.js\"></script> {% endblock %} {% block libs %} {{ super () }} <!-- favicons --> <link rel=\"shortcut icon\" href=\"../assets/images/favicon.ico\" type=\"image/x-icon\"> <link rel=\"icon\" href=\"../assets/images/favicon_32x32.png\" sizes=\"32x32\"> <link rel=\"icon\" href=\"../assets/ima
|