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

質問編集履歴

1

情報の修正

2020/12/28 13:15

投稿

退会済みユーザー
title CHANGED
@@ -1,1 +1,1 @@
1
- Markdown技法記述したコードがスマートフォンで表示した時に勝手に改行されてしまう問題を解決したい。
1
+ Python-MarkdownでHTMLに変換したコードがスマートフォンで表示した時に勝手に改行されてしまう問題を解決したい。
body CHANGED
@@ -1,11 +1,40 @@
1
- Markdownで以下のようにコ記述しました。
1
+ DjangoでMarkdownで入力したテキストをテンプレトでHTMLに変換できるサンプルアプリ作成しました。
2
+ マークダウンからHTMLに変換する際のライブラリは以下のものを利用しています。
2
3
 
4
+ [Python-Markdown](https://python-markdown.github.io/)
5
+
6
+ templatetagsにフィルタを自作し、テンプレートで文字を出力する際にHTMLに変換しています。
7
+
3
- ```html
8
+ ```python
9
+ from django import template
4
- <meta name="viewport" content="width=device-width, initial-scale=1">
10
+ from django.template.defaultfilters import stringfilter
11
+ import markdown
12
+
13
+ register = template.Library()
14
+
15
+ @register.filter
16
+ @stringfilter
17
+ def markdown(value):
18
+ return markdown.markdown(value)
5
19
  ```
6
20
 
21
+ テンプレート
22
+ ```python
23
+ {{ text | markdown | safe }}
24
+ ```
7
- パソコンではスクロールバーが表示され改行されず表示されてまうですが、スマートフォンは何故か勝手改行されスクロールバーが表示されせん
25
+ 例えば以下のよう```文字列```と入力たもをテンプレートでHTML変換し出力したとし
26
+ ```python
27
+ from django.views.generic import ListView, DetailView, CreateView, UpdateView, DeleteView, TemplateView
28
+ ```
8
29
 
30
+ パソコンで見た時は正常に、画像のように横に長い時はスクロールも出来ます。
9
- Googleの検証機能では、スマトフォンでもスクロールバーが表示され、折り返されずに表示されるのですが、実際のスマートフォンですとうまくいきません。
31
+ ![イメジ説明](64fb828f5ba66d0ee12da08bb1187414.png)
10
32
 
33
+ ところが、スマートフォンで見ると以下のように表示されてしまいます。
34
+ ![イメージ説明](16c67ecdd935bbaff6d489014e5e7577.jpeg)
35
+
36
+ スマートフォンでも折り返さずに表示したいのですが、上手くいきません。
37
+ ちなみに、Googleの検証ツールを使うとスマートフォンでも正常に横スクロール表示ができるのですが、実機では正常に動作しません。
38
+
39
+ 何かわかる方がいましたらアドバイス頂きたいです。
11
- どのうにすれば良ょうか?
40
+ ろしくお願いします。