teratail header banner
teratail header banner
質問するログイン新規登録

質問編集履歴

2

誤字

2020/05/10 08:32

投稿

退会済みユーザー
title CHANGED
@@ -1,1 +1,1 @@
1
- [CSS]olの背景色の幅を合わせたい
1
+ [CSS]背景色の幅を合わせたい
body CHANGED
File without changes

1

問題を具体化

2020/05/10 08:32

投稿

退会済みユーザー
title CHANGED
@@ -1,1 +1,1 @@
1
- [CSS]コードを記述するボックススタイル調整したい(Google Code prettify)
1
+ [CSS]ol背景色の幅合わせたい
body CHANGED
@@ -1,73 +1,30 @@
1
- ブログを書きたくて、webページを作成中です。
1
+ webページでサンプルコード表示するためのボックスをりたいです。
2
+ ![イメージ説明](4a0799b345976df774ee85fb1984f6d6.png)
2
- ブログ内でコードを表示ためにGoogle Code prettifyを利用してSyntax Highlightしよう
3
+ 図のようにコードが長くなった際に、背景色ボックスの端まで表示されるようのでが、どうすればよいでしょうか?
3
- [こちら](https://www.webdesignleaves.com/pr/plugins/google_code_prettify.html)のページを参考にしたのですが、レイアウトが思ったようにいかなくて困っています。
4
4
 
5
- ![イメジ説明](cb50b1fd4640aa5ac784ad0111089c1f.png)
5
+ いま出力されている背景色は自分で実装したものではなく、Google Code prettyのテマとして出力されているものです。
6
-
7
- 理想は↑のような表示になることです。(背景色が途切れている点は改善したい)
8
- これを表示させるのには以下のコードを使用しています。
9
-
10
6
  ```html
11
- <! code syntax highlight >
12
- <script src="https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/run_prettify.js"></script>
13
- ```
14
-
15
- ```html
16
- <pre class="prettyprint linenums"> import plotly.graph_objects as go <br> fig = go.Figure( <br> data=[go.Bar(y=[2, 1, 3])], <br> layout_title_text="A Figure Displayed with fig.show()" <br> )fig.show()</pre>
17
- ```
18
- <br>で無理やり改行していますがあまりに見づらいです。
19
-
20
- ```html
21
7
  <pre class="prettyprint linenums">
22
- import plotly.graph_objects as go
23
- fig = go.Figure(
8
+ ...code here...
24
- data=[go.Bar(y=[2, 1, 3])],
25
- layout_title_text="A Figure Displayed with fig.show()"
26
- )
27
- fig.show()
28
9
  </pre>
29
10
  ```
30
-
31
- このように記述すると、以下の画像のように出力されてこれまた困ってしまいます。
32
- ![イメージ説明](9ef856060caba939815791a85fdcd4db.png)
33
-
34
- cssの設定は以下になります。
35
11
  ```css
36
12
  /** code */
37
13
  pre.prettyprint {
38
14
  font-family: Monaco, Menlo, Consolas, 'Courier New', Courier, monospace, sans-serif;
39
- border-top-left-radius: 0;
15
+ border: none;
40
- /* テーマの角丸の設定を上書き */
41
- border-top-right-radius: 0;
42
- border-bottom-left-radius: 0;
43
- border-bottom-right-radius: 0;
44
16
  }
45
17
 
46
- .prettyprint ol {
18
+ pre.prettyprint ol {
47
- /* 間隔の調整 */
48
- margin: 1rem;
49
- /* 折り返し */
50
- overflow: auto
19
+ overflow-x: auto;
51
20
  }
52
21
 
53
- .prettyprint ol.linenums > li {
22
+ pre.prettyprint ol.linenums > li {
54
- /* 行番号を1行ずつ表示 */
55
23
  list-style-type: decimal;
56
- /* 行番号との区切り線 */
57
- border-left: solid 1px #eeeeee;
58
- /* 間隔の調整 */
59
- padding-left: 0em;
60
- /* 行番号の色 */
61
24
  color: #999;
25
+ padding-left: 0.8em
62
26
  }
63
27
  ```
64
28
 
65
-
66
- ## 試したこと
67
- olやliのdisplayをflexにしてtext-alignをleftにしてみましたが、変化はありませんでした。(css触りたてなので暗中模索)
68
-
69
- ## やりたいこと
70
- - コードの背景色が途切れないようにしたい
71
- - コードを左詰めに表示したい(<br>連発はしたくない)
72
-
73
- cssは参考ページから持ってきたものですが、olliの記述が出てく仕組みが正直分かりません。Google Code Prettifyが何をどこで指定るのかも知ってる人がいましたら教えてただけませんか?
29
+ pre.prettyprint ol.linenums > li widthを100%にすなどしてました、解決することができませんでした。また外枠の黒線を消と思borderをnoneにしてみましたが、うまくませんでした。
30
+ どこの要素で指定すればよいか、教えていただけませんか?