Récemment, j'ai créé un "exécuteur de code" pour le site Web, j'ai copié directement le thème de Xcode, et maintenant le code peut enfin voir l'effet en cours dans le navigateur en temps réel. L'effet est le suivant:
Vous pouvez également éditer le code en plein écran:
À l'avenir, vous pourrez lire des articles techniques comme celui-ci:
Quelqu'un peut demander, quelle est l'utilité de cette fonction?
Ce n'est pas de la vantardise, si l'article technique peut être équipé d'un exécuteur de code, ce serait génial. Par exemple, dans un article sur l'algorithme, penser ne suffit pas, l'essentiel est de pouvoir maîtriser l'écriture du code. Si vous ne comprenez pas le code, vous pouvez cliquer directement sur le bouton "Exécuter" pour voir l'effet d'exécution du code. Par exemple, l'image ci-dessus est une capture d'écran de mon petit livre "Algorithm Interview with Dachang". Vous pouvez exécuter le code directement. Pour plus de détails, vous pouvez voir:
Titre: Déterminez s'il s'agit d'une adresse IP
Petit livre "Dachang Algorithm Interview"
Quelle est la fonction d'une api? Il est préférable d'utiliser du texte pour expliquer pendant longtemps, et de sortir directement le résultat de l'exécution avec du code.
Comment réaliser cette fonction
L'écologie frontale est vraiment géniale. Quelle que soit la fonction que vous implémentez, il y aura une solution toute faite. Il vous suffit de la modifier légèrement. Si elle ne répond pas à vos besoins, modifiez le code source. C'est beaucoup plus fort que le terminal mobile.
Sur le site Web frontal des petites classes, j'ai mis une bibliothèque tierce couramment utilisée, qui mentionnait codeMirror, qui est un éditeur de code basé sur lequel implémente un «exécuteur de code».
https://lefex.gitee.io/framework-book/codeMirror.html
Plusieurs problèmes ont été rencontrés dans le processus de mise en œuvre:
1. Le thème est trop moche
Pour être honnête, je n'ai pas trouvé de thème que j'aime dans codeMirror, et j'ai copié le thème Xcode directement. codeMirror prend en charge la personnalisation du thème, modifiez simplement le style css directement, puis importez-le dans le projet:
2. Exécutez le code
Exécuter la chaîne de code js, utiliser directement la fonction eval
console.log(eval('2 + 2'));
// expected output: 4
Les détails peuvent être vus:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/eval
3. Crochet de sortie Console.log
Pendant l'exécution du code, vous pouvez générer du contenu via console.log pour déboguer le code. Réécrivez simplement la fonction console.log et affichez le contenu à afficher sur l'interface utilisateur.
Cet article parle principalement d'une idée générale, et il y a de nombreux détails à traiter. Vous pouvez aller directement sur le site Web de la petite classe pour faire l'expérience.
Adresse du site Web:
https://lefex.gitee.io/
https://lefex.github.io/
Allez tout le monde!
Appui long pour suivre
Su Yan "Classe Front End"
Aidez les utilisateurs de 10 W à démarrer et à accéder au front-end