Как я могу визуально отобразить блок кода Python, используя HTML / CSS и Javascript? - PullRequest
Новая
       2

Как я могу визуально отобразить блок кода Python, используя HTML / CSS и Javascript?

0 голосов
/ 28 ноября 2018

Я хотел бы отобразить блоки кода, как это делает сайт, как это делает StackOverflow: 

def func(A):
    result = 0
    n = len(A)
    while n > 1:
        n = n/2
        result = result + min(A[1,...,n])
    return result

Он правильно окрашивает, форматирует и помещает весь код в код, как только он был обозначен как блок кода.Я бы хотел, чтобы это происходило и на моем сайте.Кстати, все блоки кода будут python.

Шрифт, фон и интервал кажутся достаточно простыми для реализации (просто укажите класс, в котором фон серый, шрифт - это тот шрифт, а интервал - моноширинный)).

Однако мне интересно, как правильно раскрасить текст?Я предполагаю, что мне нужно будет использовать JavaScript и перебрать все слова в блоке кода, проверяя, соответствуют ли они списку слов, которые я предварительно настроил, чтобы они стали определенными цветами.

Дайте мне знать, если я сделаллюбые неправильные предположения где-либо здесь, или вещи, которые могут усложнить мой подход.

1 Ответ

0 голосов
/ 04 декабря 2018

Вы можете использовать режим CodeMirror только для чтения в элементе code.У самого Code Mirror есть несколько языков для выбора, в примере я использую режим python, чтобы раскрасить код как python.По сути, в этом примере я загружаю библиотеку, загружаю языковой режим для раскраски, и всякий раз, когда страница загружается, мы получаем элемент с идентификатором, получаем код, затем удаляем содержимое этого элемента и генерируемЦветная версия кода, вы можете настроить lineNumbers, если хотите.Надеюсь, что это работает для вас:) 

<!DOCTYPE html>
<html>
  <head>
    <title>CodeMirror Read-only Highlighting Example</title>
    <link rel="stylesheet" href="http://codemirror.net/lib/codemirror.css">
    <script src="http://codemirror.net/lib/codemirror.js"></script>
    <script src="http://codemirror.net/mode/python/python.js"></script>
  </head>
  <body>
    <pre><code id="python_code">def func(A):
    result = 0
    n = len(A)
    while n > 1:
        n = n/2
        result = result + min(A[1,...,n])
    return result
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...