Лучшие практики отображения компьютерного кода с использованием пре и кода - PullRequest
Новая
       50

Лучшие практики отображения компьютерного кода с использованием пре и кода

0 голосов
/ 28 февраля 2020

Я создаю некоторые примеры кодирования и у меня есть предварительное решение, но я чувствую, что могу упустить более надежное решение, особенно учитывая, что мой код импортируется в D2L и может быть отредактирован в редакторе WYSEWYG, а процесс SAVE наказывает " слабый "C S S. Вот теги CODE, окруженные PRE (Было бы неплохо также работать без пустой / верхней строки, введенной PRE, то есть PRE / CODE на той же строке не отображается как пустой старт строка в верхней части «поля кода» - у меня возникла проблема, из-за которой кажется, что вся коробка сворачивается (именно поэтому я показываю схему каждого КОДА) 

<pre>                
      <code>df = sqlContext.read.format(‘jdbc’). \</code>
      <code>options(url=‘jdbc:sqlite:/home/.../data/Chinook_Sqlite.sqlite’, \</code>
      <code>dbtable=‘employee’,driver=‘org.sqlite.JDBC’).load()
 
df = sqlContext.read.format(‘jdbc’). \</code>
      <code>options(url=‘jdbc:sqlite:/home/.../data/Chinook_Sqlite.sqlite’, \</code>
      <code>dbtable=‘employee’,driver=‘org.sqlite.JDBC’).load()

Здесь вы видите, что моя стилизация выключена, однострочная и многострочная не проходят проверку глаз: \

[! [Скриншот] [1]] [1] My css пока это так - у меня включена граница, чтобы я мог видеть, перекрываются ли теги CODE внутри тегов PRE. Кроме того, на левом поле достаточно много места, я считаю, что этот код лишен всех управляющих символов и они почти действуют как вкладки, которых не должно быть ... на этом скриншоте у меня для поля PRE CODE установлено значение 0 вместо -120: [! [введите описание изображения здесь] [2]] [2]

Надеюсь не доверяйте необходимости устанавливать размеры шрифта в 120% и 80% - если кто-то может предложить большую стилизацию, большое спасибо - 

pre code {
    margin: -120px;
    margin-bottom: 1em;
    /* padding: 12px 8px; */
    padding: 0px; 
    width: auto;
    max-height: 600px;
    border: 1px solid #999;
    line-height: 30px;
    font-family: Monaco, Menlo, Consolas, "Courier New", monospace;
    color: #333;
    font-size: 120%;
    background-color: #efefef;
    overflow-x: auto;
    white-space: pre-wrap;       
    white-space: -moz-pre-wrap;  
    white-space: -pre-wrap;      
    white-space: -o-pre-wrap;    
    word-wrap: break-word;    
  }

 code {
   font-family: Monaco, Menlo, Consolas, "Courier New", monospace;
   font-size: 80%;
   color: #000000;
   padding: 0px;
   margin-left:3em;
   background-color: #efefef;
   color: #333;
 }

PS Это решение пытается добавить полосы прокрутки, если она слишком длинна в вертикальном направлении МАКС. ВЫСОТА, если я хочу добавить горизонтальные полосы прокрутки, есть ли настройка для этого?

========================== Единственное другое загруженное css - bootstrap 

<!doctype html>
<html lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
         <link rel="stylesheet" href="BigDataAnalytics_files/bootstrap.min.css">
         <link rel="stylesheet" href="BigDataAnalytics_files/bootstrap-theme.min.css">
         <link rel="stylesheet" href="BigDataAnalytics_files/coe_col.css">
    </head>
    <body>
         <div class="col-xs-12 col-sm-offset-2 col-sm-8">
        <p>Invoke PySpark session with SQLite:</p>
                <code>pyspark --driver-class-path .:sqlite-jdbc-3.8.11.2.jar</code>
                <p>Create a data frame:</p>
                <pre>
                    <code>df = sqlContext.read.format(‘jdbc’). \</code>
                    <code>options(url=‘jdbc:sqlite:/home/.../data/Chinook_Sqlite.sqlite’, \</code>
                    <code>dbtable=‘employee’,driver=‘org.sqlite.JDBC’).load()

РЕШЕНИЕ: я добавил строку пробел: pre-line; в моем пре css и это решило проблему!

...